Styling react native components
When I run following code on my phone
render() {
return [
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>,
];
}
I am getting screen split between Search and Productcard component. It feels like each one of them takes by default 50% of screen, but I want them to come one after each other.
Search component is just a dummy text:
export default function Search() {
return <Text>Hej</Text>;
}
But when I remove around them it looks good.
react-native styling
asked Nov 12 at 5:37
Eldlabs
10110
add a comment |
When I run following code on my phone
render() {
return [
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>,
];
}
I am getting screen split between Search and Productcard component. It feels like each one of them takes by default 50% of screen, but I want them to come one after each other.
Search component is just a dummy text:
export default function Search() {
return <Text>Hej</Text>;
}
But when I remove around them it looks good.
react-native styling
asked Nov 12 at 5:37
Eldlabs
10110
can you remove flex:1 from both the views in the above code and then check.
– Ayush Nawani
Nov 12 at 6:01
add a comment |
When I run following code on my phone
render() {
return [
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>,
];
}
I am getting screen split between Search and Productcard component. It feels like each one of them takes by default 50% of screen, but I want them to come one after each other.
Search component is just a dummy text:
export default function Search() {
return <Text>Hej</Text>;
}
But when I remove around them it looks good.
react-native styling
asked Nov 12 at 5:37
Eldlabs
10110
When I run following code on my phone
render() {
return [
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>,
];
}
I am getting screen split between Search and Productcard component. It feels like each one of them takes by default 50% of screen, but I want them to come one after each other.
Search component is just a dummy text:
export default function Search() {
return <Text>Hej</Text>;
}
But when I remove around them it looks good.
react-native styling
react-native styling
asked Nov 12 at 5:37
Eldlabs
10110
asked Nov 12 at 5:37
Eldlabs
10110
asked Nov 12 at 5:37
Eldlabs
10110
asked Nov 12 at 5:37
Eldlabs
10110
asked Nov 12 at 5:37
Eldlabs
10110
10110
can you remove flex:1 from both the views in the above code and then check.
– Ayush Nawani
Nov 12 at 6:01
add a comment |
can you remove flex:1 from both the views in the above code and then check.
– Ayush Nawani
Nov 12 at 6:01
can you remove flex:1 from both the views in the above code and then check.
– Ayush Nawani
Nov 12 at 6:01
can you remove flex:1 from both the views in the above code and then check.
– Ayush Nawani
Nov 12 at 6:01
add a comment |
3 Answers
3
active
oldest
votes
are you looking for something like this?
render() {
return(
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}
answered Nov 12 at 6:02
DNA.h
12910
add a comment |
I suppose you want to make them scroll, if so you have to wrap them around a <ScrollView>.
like so,
render() {
return (
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
);
}
And in second case if you want only the second half to be scrollable just wrap that view inside a <ScrollView> tag.
answered Nov 12 at 6:03
RuthenicEye
258
add a comment |
Thx for helping, it got me in right direction but I got it working by code below:
<View>
<Search />,
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
,
</View>
answered Nov 13 at 4:54
Eldlabs
10110
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
});
}
});
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%2f53256434%2fstyling-react-native-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
are you looking for something like this?
render() {
return(
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}
answered Nov 12 at 6:02
DNA.h
12910
add a comment |
are you looking for something like this?
render() {
return(
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}
answered Nov 12 at 6:02
DNA.h
12910
add a comment |
are you looking for something like this?
render() {
return(
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}
answered Nov 12 at 6:02
DNA.h
12910
are you looking for something like this?
render() {
return(
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={{flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</View>
);
}
answered Nov 12 at 6:02
DNA.h
12910
answered Nov 12 at 6:02
DNA.h
12910
answered Nov 12 at 6:02
DNA.h
12910
answered Nov 12 at 6:02
DNA.h
12910
12910
add a comment |
add a comment |
I suppose you want to make them scroll, if so you have to wrap them around a <ScrollView>.
like so,
render() {
return (
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
);
}
And in second case if you want only the second half to be scrollable just wrap that view inside a <ScrollView> tag.
answered Nov 12 at 6:03
RuthenicEye
258
add a comment |
I suppose you want to make them scroll, if so you have to wrap them around a <ScrollView>.
like so,
render() {
return (
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
);
}
And in second case if you want only the second half to be scrollable just wrap that view inside a <ScrollView> tag.
answered Nov 12 at 6:03
RuthenicEye
258
add a comment |
I suppose you want to make them scroll, if so you have to wrap them around a <ScrollView>.
like so,
render() {
return (
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
);
}
And in second case if you want only the second half to be scrollable just wrap that view inside a <ScrollView> tag.
answered Nov 12 at 6:03
RuthenicEye
258
I suppose you want to make them scroll, if so you have to wrap them around a <ScrollView>.
like so,
render() {
return (
<ScrollView>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Search />
</View>,
<View style={{ flex: 1, flexDirection: 'row' }}>
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
);
}
And in second case if you want only the second half to be scrollable just wrap that view inside a <ScrollView> tag.
answered Nov 12 at 6:03
RuthenicEye
258
answered Nov 12 at 6:03
RuthenicEye
258
answered Nov 12 at 6:03
RuthenicEye
258
answered Nov 12 at 6:03
RuthenicEye
258
258
add a comment |
add a comment |
Thx for helping, it got me in right direction but I got it working by code below:
<View>
<Search />,
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
,
</View>
answered Nov 13 at 4:54
Eldlabs
10110
add a comment |
Thx for helping, it got me in right direction but I got it working by code below:
<View>
<Search />,
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
,
</View>
answered Nov 13 at 4:54
Eldlabs
10110
add a comment |
Thx for helping, it got me in right direction but I got it working by code below:
<View>
<Search />,
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
,
</View>
answered Nov 13 at 4:54
Eldlabs
10110
Thx for helping, it got me in right direction but I got it working by code below:
<View>
<Search />,
<FlatList
style={styles.list}
data={this.state.products}
renderItem={({ item }) => <ProductCard product={item} />}
keyExtractor={item => item.id}
/>
,
</View>
answered Nov 13 at 4:54
Eldlabs
10110
answered Nov 13 at 4:54
Eldlabs
10110
answered Nov 13 at 4:54
Eldlabs
10110
answered Nov 13 at 4:54
Eldlabs
10110
10110
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53256434%2fstyling-react-native-components%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
can you remove flex:1 from both the views in the above code and then check.
– Ayush Nawani
Nov 12 at 6:01