We Keep Coding

React Native Tabbar Icon is not displaying on the a real device

I have a react native application in which I on the tab bar I am displaying an image as my tab bar icon. The issue is that it displays completely fine on the android simulator but when I run the same app on a real device the tab bar icon (which is a static image) is showing.
Here is the code snippet that I am using
<Tab.Screen
name="NFT Market"
component={NftMarketplace}
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({focused}) => (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={customIcons.nftmaketplace}
resizeMode="contain"
style={{
width: 50,
height: 50,
}}
/>
</View>
),
tabBarButton: props => <CustomTabbarButtom {...props} />,
}}
/>
Following is the CustomTabbarButtom
const CustomTabbarButtom = ({children, onPress}) => {
return (
<TouchableOpacity onPress={onPress} style={styles.customTabbarButtom}>
<View style={styles.view__customTabbarButtom}>{children}</View>
</TouchableOpacity>
);
};
Here the Image source customIcons.nftmaketplace is a static image I have imported at the top of my file.

i need to give two clicks when the keyboard is open -- React native

I have a project in react native, i created a view that it has a button, when the user does not open the keyboard, he only gives a click, but if the keyboard opens, the user needs to gie two clicks, because when the user click at button is nos functioned. It should be hidding.
Someone knows how the click can function, if the keyboard is open.
The code is the next
return (
<ScrollView>
<View style={LoginStyles.container_login}>
<View style={LoginStyles.container_detail}>
<View style={LoginStyles.container_components}>
<View style={LoginStyles.container_image}>
<Image
style={LoginStyles.container_display_image}
source={logo}/>
</View>
<TextInput style={LoginStyles.container_user} placeholder = {labelApp.holderUser} onChangeText={(user) => this.checkDataEmail(user)}/>
<TextInput secureTextEntry={true} style={LoginStyles.container_password} placeholder = {labelApp.holderPassword} onChangeText={(password) => this.checkDataPassword(password)}/>
<TouchableOpacity disabled={ this.state.disabled }
style={this.state.disabled ? LoginStyles.button_disabled: LoginStyles.button_login}
onPress={this.handleClickBtnEnter}
>
<Text style={LoginStyles.text_button_login}>
{labelApp.textButtonLogin}
</Text>
</TouchableOpacity>
<Text
style={LoginStyles.text_forgot_password}
onPress={this.handleClickBtnEnter}
>
{labelApp.textForgotUser}
</Text>
<Text
style={LoginStyles.text_register}
onPress={this.handleClickBtnEnter}
>
{labelApp.textRegister}
</Text>
<View style={LoginStyles.container_image_share}>
<Image style={LoginStyles.container_display_share}
source={facebook}/>
<Image style={LoginStyles.container_display_share}
source={google}/>
</View>
<View style={LoginStyles.container_image}>
<Image
style={LoginStyles.container_display_register}
source={register}/>
</View>
</View>
</View>
</View>
</ScrollView>
);
The event is on TouchableOpacity

Try setting the keyboardShouldPersistTaps value on your ScrollView to handled, like this:
return (
<ScrollView keyboardShouldPersistTaps='handled'>
...
</ScrollView>
);

how to handle images from API in a swiper

I installed react-native-swiper and I swipe 3 full screen views and everything is okay, but I have to swipe images from an API, I'll receive images from an API. I dont know how to display it, because the number of images will change everytime I can't put my images in my project
I have to utilize flatList in one view or what ?
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
<View style={styles.slide1}>
<Text style={styles.text}>Dima Arcol 1</Text>
</View>
<View style={styles.slide2}>
<Text style={styles.text}>Dima Arcol 2</Text>
</View>
<View style={styles.slide3}>
<Text style={styles.text}>Dima Arcol 3</Text>
</View>
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);

You can iterate over your data using map.
lets say your data is
data = [
{
text: 'imageheading',
image: 'yoururl'
},
...
];
return (
<View style={styles.container}>
<Swiper autoplay={true} loop={true} style={styles.wrapper} showsButtons={true}>
{this.data.map((data) => {
return(
<View style={styles.slide3}>
<Text style={styles.text}>{data.text}</Text>
<Image src={{ uri: data.image }}/>
</View>
);
})}
</Swiper>
<View style={styles.myButtunContainer}>
<MyLButton/>
</View>
</View>
);

React Native - iOS - Local image invisible (works on android)

I'm mapping TouchableOpacity with an Image nested inside of it. It works great on Android but on iOS the image is invisible. There is still a 75x75 touchable opacity that I can tap but the image is invisible in the modal that pops up and just in general.
How does this work?
I'm using Expo SDK FileSystem to get the path of each image.
For example: file://path/to/container/progress/myfilehash.jpg
I push this to my state and map it in the component. the require() function WILL NOT WORK for the way I am doing this. I think it is purely a problem with the rendering.
Map code:
{this.state.images.map((val, key) => (
<TouchableOpacity
key={key}
onPress={() => this.setState({active: val, modal: true})}
>
<Image
style={{width: 75, height: 75}}
source={{isStatic: true, uri: val}}
/>
</TouchableOpacity>
))}
Modal:
<Container style={Colors.Backdrop}>
<Header style={Colors.Navbar}>
<Left>
<TouchableHighlight
onPress={() => {
this.setState({modal: false})
}}>
<Icon
name="arrow-back"
style={{color: 'white'}}
/>
</TouchableHighlight>
</Left>
<Body></Body>
<Right>
<TouchableOpacity
onPress={() => {
this._deleteImage(this.state.active);
}}>
<Text
style={[
Colors.ErrorText, {
fontSize: 24,
marginRight: 10
}
]}>×</Text>
</TouchableOpacity>
</Right>
</Header>
<Content>
<View
style={{flex: 1}}
>
<FitImage
source={{uri: this.state.active}}
/>
</View>
</Content>
</Container>
Code for fetching image paths. (NOTE: I tried not truncating "file://" from ios with same exact result)
_getAllImagesInDirectory = async() => {
let dir = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory + 'progress');
dir.forEach((val) => {
this.state.images.push(Platform.OS === 'ios' ? FileSystem.documentDirectory.substring(7, FileSystem.documentDirectory.length) : FileSystem.documentDirectory + 'progress/' + val);
});
await this.setState({images: this.state.images, loading: false});
}

I also faced this problem once, I solved it by pasting the image in the root folder and then used that path in the source of Image tag.

react-native chat app "split" chat bubble

I`m working on a chat app and I use gifted chat .
I want my bubble to contain both text and an image. That works fine but I'm not satisfied with the way it is split...
I want to have text on the left and the image on the right side.
Currently, my text is above the image:
This is the code for the content of the bubble:
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View>
<Text style = {styles.titleText}> {title}</Text>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</TouchableOpacity>
Any ideas on how I can achieve text on the left and the image on the right?

You need flexDirection on View: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction
The default value is column so children are stacked vertically.

You need to use flex in View https://facebook.github.io/react-native/docs/flexbox.html You can also give desired alignment to text and image. By default direction is column so use flexDirection:'row'
Use the code below.
<TouchableOpacity key={i} style={[styles.mapView, this.props.mapViewStyle]}>
<View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:0.5}}>
<Text style = {styles.titleText}> {title}</Text>
</View>
<View style={{flex:0.5}}>
<Image style={[styles.image, this.props.imageStyle]} source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>
</View>
</TouchableOpacity>