We Keep Coding

React Native FlatList refreshing not working

i got an problem with the refreshing on pull function. The FlatList renders fine, but pull to refresh is not working. This is my current sourcecode:
return (
<View style={GlobalStyles.flex1}>
<FlatList
showsVerticalScrollIndicator={false}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={() => {
console.log("onRefresh loadVocable");
loadVocables();
}}
/>
}
data={vocables}
keyExtractor={vocable => vocable.id}
onEndReached={() => {
if (!isRefreshing && !endReached) {
loadVocables();
}
}}
renderItem={vocable => (
<TouchableOpacity
onPress={() => {
props.navigation.navigate({ routeName: "editVocable", params: { vocable: vocable.item } });
}}
onLongPress={() => {
handleLongPress(vocable.item.id);
}}>
<Card style={styles.cardStyle}>
<View style={styles.part1}>
<Text style={styles.vocableText}>{vocable.item.wordENG}</Text>
<Text style={styles.vocableText}>{vocable.item.wordDE}</Text>
</View>
<View style={styles.part2}>
<Ionicons name={vocable.item.known ? "md-checkmark-circle" : "md-close-circle"} size={23} color={vocable.item.known ? Colors.success : Colors.danger} />
</View>
</Card>
</TouchableOpacity>
)}
/>
</View>
);
In the official docs is an example that says contentContainerStyle needs to be flex: 1 to know the height, that makes sence to me, so when i set contentContainerStyle with flex 1, refresh on pull works fine, but then i can't scroll anymore in the Flatlist and everthing get very tight, so the style also change then. Does anyone know why this happen?
The first picture is with "contentContainerStyle={{flex: 1}}" and the last one is without contentContainerStyle.

The answer was so easy, I compared a new project (there worked my code) to the one where the problem was and after 5 days I found the little error:
My import was wrong!
I imported FlatList like this:
import { FlatList } from "react-native-gesture-handler";
But it needs to get imported from React-Native so like this:
import { FlatList } from "react-native";
Thanks to #The1993, without the hint to compare the projects, maybe I would stuck forever on this error :D In the future I will compare working files to find any error!

contentContainerStyle is used to style inner content e.g items alignments, padding, etc
style is used to align its height and relations
You can replace style={{flex: 1}} instead of contentContainerStyle or wrap the parent element with flex: 1

the library "react-native-snap-carousel" is not processing the card image

I am new in react native and I was trying to use the "react-native-snap-carousel". The carousel is working with the parameters in the "carouselItems" variable as I sent, but the image is not working. I supoused to place it at the Card as a background image, with a short description with the same parameter array, but it is not working.
Can anyone help me to set it?
the array used to fill the cards:
const carouselItems = [
{
title: "Doce",
text: "[TEXTO DESCRITIVO]",
thumbnail: "assets/splash.png",
},
{
title: "Salgado",
text: "[DESCRIÇÃO]",
thumbnail: "assets/splash.png",
},
]
the folder structure is:
homemade-app / assets / splash.png
return (
<View style={styles.item}>
<ParallaxImage
source={{ uri: item.thumbnail }}
containerStyle={styles.imageContainer}
style={styles.image}
parallaxFactor={0.2}
{...parallaxProps}
/>
{item.thumbnail}
<Text style={styles.title} numberOfLines={2}>
{item.title}
</Text>
</View>
)
}
const goForward = () => {
carouselRef.current.snapToNext();
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={goForward}>
<Text>go to next slide</Text>
</TouchableOpacity>
<Carousel
layout={"default"}
ref={ref => carousel = ref}
data={carouselItems}
sliderWidth={screenWidth}
sliderHeight={screenWidth}
itemWidth={screenWidth - 60}
renderItem={renderItem}
onSnapToItem={index => setState({ activeIndex: index })}
hasParallaxImages={true} />
</View>
);
}
I saw the article about how to handle local file with assets, but I still could not make it work properly.
Link to the article: (https://dev.to/fdefreitas/how-to-obtain-a-uri-for-an-image-asset-in-react-native-with-expo-7bm)

If you are using expo. First of all try with a static route remember you need full path not assets/myimage this is wrong, because sometime use it from array give problems like in this question Render images sources from parsed array of objects in react native .
array
const carouselItems = [
{
title: "Doce",
text: "[TEXTO DESCRITIVO]",
thumbnail: require("./../assets/splash.png"),
},
{
title: "Salgado",
text: "[DESCRIÇÃO]",
thumbnail: require("./../assets/splash.png"),
},
]
<ParallaxImage
source={require('#expo/snack-static/yourimage.png')}
...
/>
or put your image in same folder
<ParallaxImage
source={require('./your-image.png')}
...
/>

How to make react navigation header dynamic?

In my react native app, I am trying to implement a message box in the header which when clicked shows a screen with the users messages. I am trying to make the message icon shown in the header vary depending on whether the user has unread messages or not.
In my AppNavigator file, I have tried using a function which stores whether or not there are unread messages and then returns what should be displayed in the header accordingly.
navigationOptions: ({ navigation, goBack }) => ({
title: "Title",
headerRight: () => {
// unread_messages = check if user has any unread messages
}).then((unread_messages) => (
<View style={{flexDirection: "row"}}>
<TouchableOpacity
onPress={() => {
navigation.navigate("Messages");
}}
>
<View style={{ flexDirection: "row" }}>
{ unread_messages ? (
<Ionicons name="md-mail-unread" size={20}/>
) : (
<Ionicons name="md-mail" size={20}/>
)
</View>
</TouchableOpacity>
</View>
))
}
})
Doing this results, in nothing except the title being rendered in the header. Is it possible to query data in navigationOptions and then render depending on that? Thanks in advance

In your case, My suggestion is you should use redux store to store the read or unread status of your user's message.
Data query should be put on your screen, then update store's state, the icon will change.

Create image View show more

I want to create a view like this one:
I am using a Flatlist in which all the data is coming including these thumbnails. This thumbnail is a array of objects from where I fetch image's name and display.
I want to use this inside a FlatList where all my data is coming or I just need a dummy code to implement this feature in react native
Right now I am trying to implement it like this:
<View style={{flexDirection:'row'}}>
{data.gallery.map((each,index)=>{
console.log('thubnails ******* ', each);
<Image source={{uri: Connection.getMedia()+each.name}} style={{height:Constants.BaseStyle.DEVICE_HEIGHT/100 * 10, width:Constants.BaseStyle.DEVICE_WIDTH/100 * 10}} resizeMode='stretch' />
})}
</View>
Inside data.gallary all the thumbnails are present and data is coming from props.

Sample code from the above details.
Inside render:
<FlatList
data={this.props.sampleData} // sample data should be a array of objects
renderItem={this.renderImage}
/>
renderImage function:
renderImage = ({ item }) => (
<Image source={{ uri: Connection.getMedia()+item.name }}
style={{height:Constants.BaseStyle.DEVICE_HEIGHT/100 * 10,
width:Constants.BaseStyle.DEVICE_WIDTH/100 * 10}}
resizeMode='stretch'
/>
);
You can also use Dimensions for getting device height and width.

React Native : TabBarIOS and Navigation

I have simple app, with 3 tabs. Tabs are defined by TabBarIOS in index.ios. I’m not using Navigator nor NavigatorIOS. In each TabBarItem , I just put the component name in tags. Like this :
return(
<TabBarIOS
selectedTab={this.state.selectedTab}
//unselectedTintColor="yellow"
//tintColor="white"
//barTintColor="darkslateblue"
>
<TabBarIOS.Item
icon={{uri: 'courses.png', scale: 5}}
title="Courses"
badge={undefined}
selected={this.state.selectedTab === 'courses'}
onPress={() => {
this.setState({
selectedTab: 'courses',
});
}}>
<Courses />
</TabBarIOS.Item>
<TabBarIOS.Item
icon={{uri: 'register.png', scale: 5}}
title="Register"
badge={undefined}
selected={this.state.selectedTab === 'register'}
onPress={() => {
this.setState({
selectedTab: 'register',
});
}}>
<NavigatorIOS
//style={styles.nav}
initialRoute={{
title : 'Register',
component: Register
}}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
icon={{uri: 'profile.png', scale: 5}}
title="Profile"
badge={undefined}
selected={this.state.selectedTab === 'profile'}
onPress={() => {
this.setState({
selectedTab: 'profile',
});
}}>
<Profile />
</TabBarIOS.Item>
</TabBarIOS>
);
If you see in code, in first and third tab, i'm showing content of the item by puting component name in tags like
<Courses />
But for second item, i tried using navigatorios to show component, but it shows only a blank page with title. it doesn't show the content of component. i see lots of examples working like that, but it didn't work for me. maybe because i'm not using navigator or navigaatorios for index.ios , because in most examples i see, they put navigatorios for index and set initialroute. i tried it, but didn't work for me.
Everything works fine till here. In Courses page, I have a list view with items under it (actually items with header, which are collapsible) , when user clicks on each item , I need to redirect user to a page to show that course’s details. (I should pass some arguments also).
render(){
return (
<View style={{
flex: 1
}}>
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)}
style={styles.listView}
/>
</View>
);
}
renderRow(data) {
var header = (
<View>
<View style={styles.rowContainer}>
<View style={styles.textContainer}>
<Text style={styles.title}>{data.nid}</Text>
<Text style={styles.description} numberOfLines={0}>{data.title}</Text>
</View>
</View>
<View style={styles.separator}></View>
</View>
);
///////////
var cid = [];
var content = [];
for(let x=0; x < Object.keys(data.course).length; x++){
cid[x] = data.course[x].course_id;
content.push(
<TouchableHighlight
underlayColor='#e3e0d7'
key={x}
onPress={()=> {
this.rowPress(x); ///// here i need to redirect user to another page to show course's details
}}
style={styles.child}
>
<Text style={styles.child}>
{data.course[x].title}
</Text>
</TouchableHighlight>
);
}
var clist = (
<View style={styles.rowContainer}>
{content}
</View>
);
////////////
return (
<Accordion
header={header}
content={clist}
easing="easeOutCubic"
/>
);
}
I want to redirect user to a page and show details, and i want to have a header title and a back button (like Navigator or NavigatorIOS).
I've found a sample app that is doing exactly what i'm looking for, but it's too complicated for me, that i didn't understand how it is working,
react native tabbar-navigator (iOS)
I've looked into many examples and tutorials. i tried to implement their code into mine but it didn't work.
Also find some other tutorials using redux, but it's so complicated and hard for me. i'm looking for something more simpler.
Navigation using Redux
Looking forward to hearing from you,
Any help is highly appreciated. Thanks in Advance!

I found out that when i have few scenes and i want to navigate between them , best practice is to use Navigator or NavigatorIOS.
I continue my app and did few more scenes and components ( with few levels going deep ) and i found out that Navigator or NavigatorIOS is not working properly for that purpose. Then i switched to NavigationExperimental and that was awesome. Then i had some problems in state management, i found out about redux. it was not easy at first, but when i start it, you will love it.
So for newbies like me, it's better to start with redux at first. that would make life much easier for you :)