Mixing
How do I set exact height of views in React Native to get a Square grid?
0
It is my intention to have a 7x7 grid of tiles. I try to make each tile 30 wide and 30 tall. The result is a rectangle wider than it is tall. I want a square.
Board.js
export default class Board extends React.Component {
render() {
if (!this.props.rows) {
return <View></View>
}
let rows = this.props.rows;
return(
<View style={styles.container}>
<Row tiles={rows[0]}/>
<Row tiles={rows[1]}/>
<Row tiles={rows[2]}/>
<Row tiles={rows[3]}/>
<Row tiles={rows[4]}/>
<Row tiles={rows[5]}/>
<Row tiles={rows[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 210,
flex: 1,
flexDirection: 'row',
width: 210,
backgroundColor: '#434f4f',
color: '#000000',
},
});
Row.js
export default class Row extends React.Component {
render() {
let tiles = this.props.tiles;
return(
<View style={styles.container}>
<TileView tile={tiles[0]}/>
<TileView tile={tiles[1]}/>
<TileView tile={tiles[2]}/>
<TileView tile={tiles[3]}/>
<TileView tile={tiles[4]}/>
<TileView tile={tiles[5]}/>
<TileView tile={tiles[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 210,
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
});
TileView:
export default class TileView extends React.Component {
render() {
// return <View></View>;
// console.log(this.props.data);
const kind = this.props.tile[0];
const wall = this.props.tile[1];
const team = this.props.tile[2];
console.log("Kind" + kind);
console.log("Wall" + wall);
console.log("Team" + team);
let tileStyle = "teamNone";
if (team === "o") {
tileStyle = "teamO";
} else if (team === "x") {
tileStyle = "teamX";
}
console.log("The style" + tileStyle);
return <View style="teamNone"><Text>T</Text></View>
}
}
const styles = StyleSheet.create({
teamX: {
color: "#77d4d4",
width: 30,
height: 30
},
teamO: {
color: "#9ed36c",
width: 30,
height: 30
},
teamNone: {
color: "red",
width: 30,
height: 30
}
});
My main app
render() {
if (!this.state) {
return <View></View>
}
const {playerId, yourTurn, opponentTurn, finished} = this.state;
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={"foo" + index}>Override{item}</Text>
if (this.state.table) {
let table = this.state.table;
console.log("Biscuit");
console.log(table.board);
return <View style={styles.boardContainer}>
<Board rows={table.board}/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
boardContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
buttons: {
height: 100
},
button: {
color: '#cccccc'
},
list: {
flex: 1
},
playerId: {
marginTop: 100,
color: "white",
height: 40
}
});
How do I exactly set the height and width of my TileViews, Rows and Board such that the total Board is a square with each tile taking up a square shape?
Thank you! Great answer. How can I center the content? I tried running the code changing Text to T and get
react-native
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
add a comment |
0
It is my intention to have a 7x7 grid of tiles. I try to make each tile 30 wide and 30 tall. The result is a rectangle wider than it is tall. I want a square.
Board.js
export default class Board extends React.Component {
render() {
if (!this.props.rows) {
return <View></View>
}
let rows = this.props.rows;
return(
<View style={styles.container}>
<Row tiles={rows[0]}/>
<Row tiles={rows[1]}/>
<Row tiles={rows[2]}/>
<Row tiles={rows[3]}/>
<Row tiles={rows[4]}/>
<Row tiles={rows[5]}/>
<Row tiles={rows[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 210,
flex: 1,
flexDirection: 'row',
width: 210,
backgroundColor: '#434f4f',
color: '#000000',
},
});
Row.js
export default class Row extends React.Component {
render() {
let tiles = this.props.tiles;
return(
<View style={styles.container}>
<TileView tile={tiles[0]}/>
<TileView tile={tiles[1]}/>
<TileView tile={tiles[2]}/>
<TileView tile={tiles[3]}/>
<TileView tile={tiles[4]}/>
<TileView tile={tiles[5]}/>
<TileView tile={tiles[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 210,
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
});
TileView:
export default class TileView extends React.Component {
render() {
// return <View></View>;
// console.log(this.props.data);
const kind = this.props.tile[0];
const wall = this.props.tile[1];
const team = this.props.tile[2];
console.log("Kind" + kind);
console.log("Wall" + wall);
console.log("Team" + team);
let tileStyle = "teamNone";
if (team === "o") {
tileStyle = "teamO";
} else if (team === "x") {
tileStyle = "teamX";
}
console.log("The style" + tileStyle);
return <View style="teamNone"><Text>T</Text></View>
}
}
const styles = StyleSheet.create({
teamX: {
color: "#77d4d4",
width: 30,
height: 30
},
teamO: {
color: "#9ed36c",
width: 30,
height: 30
},
teamNone: {
color: "red",
width: 30,
height: 30
}
});
My main app
render() {
if (!this.state) {
return <View></View>
}
const {playerId, yourTurn, opponentTurn, finished} = this.state;
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={"foo" + index}>Override{item}</Text>
if (this.state.table) {
let table = this.state.table;
console.log("Biscuit");
console.log(table.board);
return <View style={styles.boardContainer}>
<Board rows={table.board}/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
boardContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
buttons: {
height: 100
},
button: {
color: '#cccccc'
},
list: {
flex: 1
},
playerId: {
marginTop: 100,
color: "white",
height: 40
}
});
How do I exactly set the height and width of my TileViews, Rows and Board such that the total Board is a square with each tile taking up a square shape?
Thank you! Great answer. How can I center the content? I tried running the code changing Text to T and get
react-native
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
my answer was updated please check it out, an let me know if it worked for you. upvote would be nice
– Helmer Barcos
Nov 21 '18 at 15:26
add a comment |
0
0
0
It is my intention to have a 7x7 grid of tiles. I try to make each tile 30 wide and 30 tall. The result is a rectangle wider than it is tall. I want a square.
Board.js
export default class Board extends React.Component {
render() {
if (!this.props.rows) {
return <View></View>
}
let rows = this.props.rows;
return(
<View style={styles.container}>
<Row tiles={rows[0]}/>
<Row tiles={rows[1]}/>
<Row tiles={rows[2]}/>
<Row tiles={rows[3]}/>
<Row tiles={rows[4]}/>
<Row tiles={rows[5]}/>
<Row tiles={rows[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 210,
flex: 1,
flexDirection: 'row',
width: 210,
backgroundColor: '#434f4f',
color: '#000000',
},
});
Row.js
export default class Row extends React.Component {
render() {
let tiles = this.props.tiles;
return(
<View style={styles.container}>
<TileView tile={tiles[0]}/>
<TileView tile={tiles[1]}/>
<TileView tile={tiles[2]}/>
<TileView tile={tiles[3]}/>
<TileView tile={tiles[4]}/>
<TileView tile={tiles[5]}/>
<TileView tile={tiles[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 210,
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
});
TileView:
export default class TileView extends React.Component {
render() {
// return <View></View>;
// console.log(this.props.data);
const kind = this.props.tile[0];
const wall = this.props.tile[1];
const team = this.props.tile[2];
console.log("Kind" + kind);
console.log("Wall" + wall);
console.log("Team" + team);
let tileStyle = "teamNone";
if (team === "o") {
tileStyle = "teamO";
} else if (team === "x") {
tileStyle = "teamX";
}
console.log("The style" + tileStyle);
return <View style="teamNone"><Text>T</Text></View>
}
}
const styles = StyleSheet.create({
teamX: {
color: "#77d4d4",
width: 30,
height: 30
},
teamO: {
color: "#9ed36c",
width: 30,
height: 30
},
teamNone: {
color: "red",
width: 30,
height: 30
}
});
My main app
render() {
if (!this.state) {
return <View></View>
}
const {playerId, yourTurn, opponentTurn, finished} = this.state;
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={"foo" + index}>Override{item}</Text>
if (this.state.table) {
let table = this.state.table;
console.log("Biscuit");
console.log(table.board);
return <View style={styles.boardContainer}>
<Board rows={table.board}/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
boardContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
buttons: {
height: 100
},
button: {
color: '#cccccc'
},
list: {
flex: 1
},
playerId: {
marginTop: 100,
color: "white",
height: 40
}
});
How do I exactly set the height and width of my TileViews, Rows and Board such that the total Board is a square with each tile taking up a square shape?
Thank you! Great answer. How can I center the content? I tried running the code changing Text to T and get
react-native
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
It is my intention to have a 7x7 grid of tiles. I try to make each tile 30 wide and 30 tall. The result is a rectangle wider than it is tall. I want a square.
Board.js
export default class Board extends React.Component {
render() {
if (!this.props.rows) {
return <View></View>
}
let rows = this.props.rows;
return(
<View style={styles.container}>
<Row tiles={rows[0]}/>
<Row tiles={rows[1]}/>
<Row tiles={rows[2]}/>
<Row tiles={rows[3]}/>
<Row tiles={rows[4]}/>
<Row tiles={rows[5]}/>
<Row tiles={rows[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 210,
flex: 1,
flexDirection: 'row',
width: 210,
backgroundColor: '#434f4f',
color: '#000000',
},
});
Row.js
export default class Row extends React.Component {
render() {
let tiles = this.props.tiles;
return(
<View style={styles.container}>
<TileView tile={tiles[0]}/>
<TileView tile={tiles[1]}/>
<TileView tile={tiles[2]}/>
<TileView tile={tiles[3]}/>
<TileView tile={tiles[4]}/>
<TileView tile={tiles[5]}/>
<TileView tile={tiles[6]}/>
</View>);
}
}
const styles = StyleSheet.create({
container: {
height: 30,
width: 210,
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
});
TileView:
export default class TileView extends React.Component {
render() {
// return <View></View>;
// console.log(this.props.data);
const kind = this.props.tile[0];
const wall = this.props.tile[1];
const team = this.props.tile[2];
console.log("Kind" + kind);
console.log("Wall" + wall);
console.log("Team" + team);
let tileStyle = "teamNone";
if (team === "o") {
tileStyle = "teamO";
} else if (team === "x") {
tileStyle = "teamX";
}
console.log("The style" + tileStyle);
return <View style="teamNone"><Text>T</Text></View>
}
}
const styles = StyleSheet.create({
teamX: {
color: "#77d4d4",
width: 30,
height: 30
},
teamO: {
color: "#9ed36c",
width: 30,
height: 30
},
teamNone: {
color: "red",
width: 30,
height: 30
}
});
My main app
render() {
if (!this.state) {
return <View></View>
}
const {playerId, yourTurn, opponentTurn, finished} = this.state;
const overrideRenderItem = ({ item, index, section: { title, data } }) => <Text key={"foo" + index}>Override{item}</Text>
if (this.state.table) {
let table = this.state.table;
console.log("Biscuit");
console.log(table.board);
return <View style={styles.boardContainer}>
<Board rows={table.board}/>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
boardContainer: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#434f4f',
color: '#000000',
alignItems: 'center',
justifyContent: 'center',
},
buttons: {
height: 100
},
button: {
color: '#cccccc'
},
list: {
flex: 1
},
playerId: {
marginTop: 100,
color: "white",
height: 40
}
});
How do I exactly set the height and width of my TileViews, Rows and Board such that the total Board is a square with each tile taking up a square shape?
Thank you! Great answer. How can I center the content? I tried running the code changing Text to T and get
react-native
react-native
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
edited Nov 21 '18 at 21:59
quantumpotato
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
asked Nov 21 '18 at 13:35
quantumpotatoquantumpotato
3,574104596
3,574104596
my answer was updated please check it out, an let me know if it worked for you. upvote would be nice
– Helmer Barcos
Nov 21 '18 at 15:26
add a comment |
my answer was updated please check it out, an let me know if it worked for you. upvote would be nice
– Helmer Barcos
Nov 21 '18 at 15:26
my answer was updated please check it out, an let me know if it worked for you. upvote would be nice
– Helmer Barcos
Nov 21 '18 at 15:26
my answer was updated please check it out, an let me know if it worked for you. upvote would be nice
– Helmer Barcos
Nov 21 '18 at 15:26
add a comment |
1 Answer
1
active
oldest
votes
1
Remember that no all devices have the same Width and Height.
I recommend you to use Dimensions component from react-native to have your design a bit more responsive. I made an Expo Snack for you
click here for see it in action
import { Dimensions } from "react-native"; //in ALL your self created components
// you should declare a constant for both dimensions on the top of the code
const {
width: MAX_WIDTH,
height: MAX_HEIGHT,
} = Dimensions.get('window');
change the following property from your MainApp.js Styles
boardContainer: {
flex:1,
height: MAX_HEIGHT,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: '#434f4f',
alignItems: 'center',
justifyContent: 'center',
},
Change the following property style from your Board.js
const styles = StyleSheet.create({
height: MAX_WIDTH,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'center',
padding:10,
},
});
Change the following property style from your Row.js
container: {
height: ((MAX_WIDTH-20)/7),
width: (MAX_WIDTH-20),
flexDirection: 'row',
backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'space-between',
}
Change the following property style from your TileView.js
teamNone: {
height:((MAX_WIDTH-22)/7)),
width: ((MAX_WIDTH-22)/7),
backgroundColor: "red",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
padding:10,
}
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413251%2fhow-do-i-set-exact-height-of-views-in-react-native-to-get-a-square-grid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Remember that no all devices have the same Width and Height.
I recommend you to use Dimensions component from react-native to have your design a bit more responsive. I made an Expo Snack for you
click here for see it in action
import { Dimensions } from "react-native"; //in ALL your self created components
// you should declare a constant for both dimensions on the top of the code
const {
width: MAX_WIDTH,
height: MAX_HEIGHT,
} = Dimensions.get('window');
change the following property from your MainApp.js Styles
boardContainer: {
flex:1,
height: MAX_HEIGHT,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: '#434f4f',
alignItems: 'center',
justifyContent: 'center',
},
Change the following property style from your Board.js
const styles = StyleSheet.create({
height: MAX_WIDTH,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'center',
padding:10,
},
});
Change the following property style from your Row.js
container: {
height: ((MAX_WIDTH-20)/7),
width: (MAX_WIDTH-20),
flexDirection: 'row',
backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'space-between',
}
Change the following property style from your TileView.js
teamNone: {
height:((MAX_WIDTH-22)/7)),
width: ((MAX_WIDTH-22)/7),
backgroundColor: "red",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
padding:10,
}
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
add a comment |
1
Remember that no all devices have the same Width and Height.
I recommend you to use Dimensions component from react-native to have your design a bit more responsive. I made an Expo Snack for you
click here for see it in action
import { Dimensions } from "react-native"; //in ALL your self created components
// you should declare a constant for both dimensions on the top of the code
const {
width: MAX_WIDTH,
height: MAX_HEIGHT,
} = Dimensions.get('window');
change the following property from your MainApp.js Styles
boardContainer: {
flex:1,
height: MAX_HEIGHT,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: '#434f4f',
alignItems: 'center',
justifyContent: 'center',
},
Change the following property style from your Board.js
const styles = StyleSheet.create({
height: MAX_WIDTH,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'center',
padding:10,
},
});
Change the following property style from your Row.js
container: {
height: ((MAX_WIDTH-20)/7),
width: (MAX_WIDTH-20),
flexDirection: 'row',
backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'space-between',
}
Change the following property style from your TileView.js
teamNone: {
height:((MAX_WIDTH-22)/7)),
width: ((MAX_WIDTH-22)/7),
backgroundColor: "red",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
padding:10,
}
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
add a comment |
1
1
1
Remember that no all devices have the same Width and Height.
I recommend you to use Dimensions component from react-native to have your design a bit more responsive. I made an Expo Snack for you
click here for see it in action
import { Dimensions } from "react-native"; //in ALL your self created components
// you should declare a constant for both dimensions on the top of the code
const {
width: MAX_WIDTH,
height: MAX_HEIGHT,
} = Dimensions.get('window');
change the following property from your MainApp.js Styles
boardContainer: {
flex:1,
height: MAX_HEIGHT,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: '#434f4f',
alignItems: 'center',
justifyContent: 'center',
},
Change the following property style from your Board.js
const styles = StyleSheet.create({
height: MAX_WIDTH,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'center',
padding:10,
},
});
Change the following property style from your Row.js
container: {
height: ((MAX_WIDTH-20)/7),
width: (MAX_WIDTH-20),
flexDirection: 'row',
backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'space-between',
}
Change the following property style from your TileView.js
teamNone: {
height:((MAX_WIDTH-22)/7)),
width: ((MAX_WIDTH-22)/7),
backgroundColor: "red",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
padding:10,
}
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
Remember that no all devices have the same Width and Height.
I recommend you to use Dimensions component from react-native to have your design a bit more responsive. I made an Expo Snack for you
click here for see it in action
import { Dimensions } from "react-native"; //in ALL your self created components
// you should declare a constant for both dimensions on the top of the code
const {
width: MAX_WIDTH,
height: MAX_HEIGHT,
} = Dimensions.get('window');
change the following property from your MainApp.js Styles
boardContainer: {
flex:1,
height: MAX_HEIGHT,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: '#434f4f',
alignItems: 'center',
justifyContent: 'center',
},
Change the following property style from your Board.js
const styles = StyleSheet.create({
height: MAX_WIDTH,
width: MAX_WIDTH,
flexDirection: 'column',
backgroundColor: "white",//'#434f4f', backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'center',
padding:10,
},
});
Change the following property style from your Row.js
container: {
height: ((MAX_WIDTH-20)/7),
width: (MAX_WIDTH-20),
flexDirection: 'row',
backgroundColor: "blue", //'#434f4f',backgroundcolor here doesnt matter
alignItems: 'center',
justifyContent: 'space-between',
}
Change the following property style from your TileView.js
teamNone: {
height:((MAX_WIDTH-22)/7)),
width: ((MAX_WIDTH-22)/7),
backgroundColor: "red",
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
padding:10,
}
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
edited Nov 27 '18 at 0:45
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
answered Nov 21 '18 at 14:36
Helmer BarcosHelmer Barcos
624310
624310
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
add a comment |
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
Hey this is pretty good. One question though. The content "Text" happens to be centered but if I change the text to "T", it shows up uncentered. How could I fix this? (See first post for update)
– quantumpotato
Nov 21 '18 at 21:50
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I'm wondering why I see a border around your Text in the online simulator but not when I run it. The background color of white you said doesn't matter does -- it shows as a border to the whole board.
– quantumpotato
Nov 21 '18 at 22:00
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
I see a small line the color of the background through the middle (see updated screenshot). It's like the rows aren't filling height properly. EDIT: My mistake, I had my TileView style as a string, not as a {style.}. Experimenting with margins now .Thank you!
– quantumpotato
Nov 21 '18 at 22:03
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
he!! did it help? or have you more problems whit the code?
– Helmer Barcos
Nov 21 '18 at 22:26
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
Yes, it helped, thank you! The little line was due toa rounding error I fixed by adding +1 to the division
– quantumpotato
Nov 26 '18 at 23:09
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53413251%2fhow-do-i-set-exact-height-of-views-in-react-native-to-get-a-square-grid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
my answer was updated please check it out, an let me know if it worked for you. upvote would be nice
– Helmer Barcos
Nov 21 '18 at 15:26