how to Use if in FlatListShow splash screen before show main screen in react native without using 3rd party libraryReact Native Flatlist renderItemReact-native: Scale image evenly, overlay textReact Native FlatList horizontal paging TouchableOpacity scrollToIndex infinite loopI am using React-native and node js.I am not able to navigate from one screen to another after getting response from Node jsAnimatedview dissapear on clicking the view in react nativeComponent won't stay wrapped within bounds (React Native)Not able to navigate to other page in react nativeHow to fix this error 'undefined is not an object'?Insert new items above the current top row in FlatList without inflicting automatic scrollToTop
What is the difference between 型 and 形?
What costs less energy? Roll or Yaw?
Are differences between uniformly distributed numbers uniformly distributed?
Tikzpicture - finish drawing a curved line for a cake slice
In a topological space if there exists a loop that cannot be contracted to a point does there exist a simple loop that cannot be contracted also?
How to create all combinations from a nested list while preserving the structure using R?
What are the advantages and disadvantages of Wand of Cure Light Wounds and Wand of Infernal Healing compared to each other?
What does "sardine box" mean?
During the Space Shuttle Columbia Disaster of 2003, Why Did The Flight Director Say, "Lock the doors."?
Is it really ~648.69 km/s delta-v to "land" on the surface of the Sun?
Why does Intel's Haswell chip allow FP multiplication to be twice as fast as addition?
What should I call bands of armed men in Medieval Times?
Help evaluating integral (anything simple that I am missing?)
How can you evade tax by getting employment income just in equity, then using this equity as collateral to take out loan?
Does this Foo machine halt?
What is the maximum number of PC-controlled undead?
How can I solve for the intersection points of two ellipses?
changing number of arguments to a function in secondary evaluation
If "more guns less crime", how do gun advocates explain that the EU has less crime than the US?
Word or idiom defining something barely functional
Why did Gandalf use a sword against the Balrog?
Which I-94 date do I believe?
Identification of vintage sloping window
How should an administrative assistant reply to student addressing them as "Professor" or "Doctor"?
how to Use if in FlatList
Show splash screen before show main screen in react native without using 3rd party libraryReact Native Flatlist renderItemReact-native: Scale image evenly, overlay textReact Native FlatList horizontal paging TouchableOpacity scrollToIndex infinite loopI am using React-native and node js.I am not able to navigate from one screen to another after getting response from Node jsAnimatedview dissapear on clicking the view in react nativeComponent won't stay wrapped within bounds (React Native)Not able to navigate to other page in react nativeHow to fix this error 'undefined is not an object'?Insert new items above the current top row in FlatList without inflicting automatic scrollToTop
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have array which has images. I want to give show images in flatlist everything is ok now. But I want to show some of them I mean if condition is true show that image.
this is my code:
renderItem= ( item ) =>
if (true)
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
else
...
if I use like this there is no error and it shows all images.
<FlatList
data=images
keyExtractor=(item, index) => index.toString()
numColumns=4
renderItem= ( item ) =>
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
/>
There is mistake here I dont know why :
if (true)
...
else
...
react-native
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
add a comment |
I have array which has images. I want to give show images in flatlist everything is ok now. But I want to show some of them I mean if condition is true show that image.
this is my code:
renderItem= ( item ) =>
if (true)
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
else
...
if I use like this there is no error and it shows all images.
<FlatList
data=images
keyExtractor=(item, index) => index.toString()
numColumns=4
renderItem= ( item ) =>
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
/>
There is mistake here I dont know why :
if (true)
...
else
...
react-native
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
1
if (true) return <View ... else return <View .... The first code didn't return JSX Element. The second code return a JSX Element
– Teguh Suryo Santoso
Mar 27 at 8:29
add a comment |
I have array which has images. I want to give show images in flatlist everything is ok now. But I want to show some of them I mean if condition is true show that image.
this is my code:
renderItem= ( item ) =>
if (true)
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
else
...
if I use like this there is no error and it shows all images.
<FlatList
data=images
keyExtractor=(item, index) => index.toString()
numColumns=4
renderItem= ( item ) =>
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
/>
There is mistake here I dont know why :
if (true)
...
else
...
react-native
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
I have array which has images. I want to give show images in flatlist everything is ok now. But I want to show some of them I mean if condition is true show that image.
this is my code:
renderItem= ( item ) =>
if (true)
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
else
...
if I use like this there is no error and it shows all images.
<FlatList
data=images
keyExtractor=(item, index) => index.toString()
numColumns=4
renderItem= ( item ) =>
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
/>
There is mistake here I dont know why :
if (true)
...
else
...
react-native
react-native
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
asked Mar 27 at 8:27
hakanhakan
4931 gold badge2 silver badges12 bronze badges
4931 gold badge2 silver badges12 bronze badges
1
if (true) return <View ... else return <View .... The first code didn't return JSX Element. The second code return a JSX Element
– Teguh Suryo Santoso
Mar 27 at 8:29
add a comment |
1
if (true) return <View ... else return <View .... The first code didn't return JSX Element. The second code return a JSX Element
– Teguh Suryo Santoso
Mar 27 at 8:29
1
1
if (true) return <View ... else return <View ... . The first code didn't return JSX Element. The second code return a JSX Element– Teguh Suryo Santoso
Mar 27 at 8:29
if (true) return <View ... else return <View ... . The first code didn't return JSX Element. The second code return a JSX Element– Teguh Suryo Santoso
Mar 27 at 8:29
add a comment |
2 Answers
2
active
oldest
votes
you forgot to add return inside if else condition:
do it like this:
renderItem= ( item ) =>
if (true)
// add return
return(
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
)
else
// add return
return(
...
)
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
add a comment |
Just use this kind of setup:
return (isTrue) ?
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity> : null;
This should render the component if it is true, else, it won't render anything.
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
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%2f55372673%2fhow-to-use-if-in-flatlist%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
you forgot to add return inside if else condition:
do it like this:
renderItem= ( item ) =>
if (true)
// add return
return(
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
)
else
// add return
return(
...
)
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
add a comment |
you forgot to add return inside if else condition:
do it like this:
renderItem= ( item ) =>
if (true)
// add return
return(
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
)
else
// add return
return(
...
)
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
add a comment |
you forgot to add return inside if else condition:
do it like this:
renderItem= ( item ) =>
if (true)
// add return
return(
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
)
else
// add return
return(
...
)
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
you forgot to add return inside if else condition:
do it like this:
renderItem= ( item ) =>
if (true)
// add return
return(
<View style= width: '22%', marginLeft: '3%', marginTop: '2%', alignItems: 'center' >
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity>
</View>
)
else
// add return
return(
...
)
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
answered Mar 27 at 8:32
MervzsMervzs
7572 silver badges16 bronze badges
7572 silver badges16 bronze badges
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
add a comment |
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
Oh thx so much. I want to ask why I should add return. Why it doesnt show the view if I dont put return @Mervzs
– hakan
Mar 27 at 8:39
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
think of it as normal render lifecycle method,. it requires to return a component so that it can render something.
– Mervzs
Mar 27 at 8:44
add a comment |
Just use this kind of setup:
return (isTrue) ?
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity> : null;
This should render the component if it is true, else, it won't render anything.
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
add a comment |
Just use this kind of setup:
return (isTrue) ?
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity> : null;
This should render the component if it is true, else, it won't render anything.
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
add a comment |
Just use this kind of setup:
return (isTrue) ?
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity> : null;
This should render the component if it is true, else, it won't render anything.
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
Just use this kind of setup:
return (isTrue) ?
<TouchableOpacity onPress=() => this.props.navigation.navigate('DescriptionPage', data: item.call )>
<ImageBackground source=item.img style= width: 60, height: 60 />
</TouchableOpacity> : null;
This should render the component if it is true, else, it won't render anything.
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
answered Mar 27 at 8:30
arjayosmaarjayosma
3952 silver badges13 bronze badges
3952 silver badges13 bronze badges
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.
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%2f55372673%2fhow-to-use-if-in-flatlist%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
1
if (true) return <View ... else return <View .... The first code didn't return JSX Element. The second code return a JSX Element– Teguh Suryo Santoso
Mar 27 at 8:29