We Keep Coding

How change only specific child styles property in react native?

Code:
<View style={mainContainerStyle}>
<View style={style1}>
{View1}
</View>
<View style={style2}>
{View2}
</View>
<View style={style3}>
{View3}
</View>
<View style={style4}>
{View4}
</View>
</View>
In this case, I want to check: style1, style2, style3, style 4. These are child styling properties.
If I find any style { flexDirection: 'row' }, I should make it 'row-reverse'. How to achieve this? Please help me.

I think you can use a function to do that specific logic
function format(style) {
if (style.flexDirection === 'row') {
return Object.assign({}, style, { flexDirection: 'row-reverse' });
}
return style;
}
and wrap it up:
<View style={mainContainerStyle}>
<View style={format(style1)}>
{View1}
</View>
<View style={format(style2)}>
{View2}
</View>
<View style={format(style3)}>
{View3}
</View>
<View style={format(style4)}>
{View4}
</View>
</View>

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 - Navigation from another file

So, I'm using 2 files: The components.js where I define all parts and molds I'll use in my app, and the App.js, which has the logic and major stuff.
To sum things up, I've defined a Card class in the components.js that has a button at the end. Here is the code for the Card:
export class Card extends Component {
render() {
return (
<View style={{height: 700}}>
<View style={{flex: 8, backgroundColor: 'white', borderRadius: 20}} >
<Image source={{uri: this.props.pic}} style={styles.img}/>
<Text style={{flex: 1, fontWeight: 'bold',fontSize: 30, paddingTop: 10}}> {this.props.nome}</Text>
<Text style={{flex: 1, fontSize: 20}}> {this.props.descricao}</Text>
<TouchableHighlight style={{flex: 1}} onPress={() => ???????} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Mais informações</Text>
</View>
</TouchableHighlight>
</View>
</View>
);
}
}
And I use it in the App.js as follows:
import {Card} from "./components.js";
class App extends Component {
render() {
return (
<View style={{flex: 1, backgroundColor:"#e6e6e1"}}>
<ScrollView>
{this.state.locations.map((pico, key) =>
<Card key={key} pic={pico.img[0]} nome= {pico.nome_do_pico} descricao={pico.how}/>
)}
</ScrollView>
</View>
);
}
}
(I've omitted the parts where it gets the info from the server and puts into the locations array)
What I need is for the button to navigate to another screen, called "Details", and I have tried a few things on the onPress but nothing has worked so far. The documentation for reactnavigation uses this.state.navigation.navigate("Details") as example, but since the Card is in another file it can't access the this.state.navigation. Any ideas?

Try if you can solve the problem by modifying the following part of your code:
in app.js
<Card key={key} pic={pico.img[0]} nome= {pico.nome_do_pico} descricao={pico.how} navigation={navigation}/>
in components.js:
<TouchableHighlight style={{flex: 1}} onPress={() => navigation.navigate('Details', {YourParameters: xx } } underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>Mais informações</Text>
</View>
</TouchableHighlight>

React Native Navigation set image name with navigation.getParam()

My frist question on Stackoverflow :)
I'am using React Navigation. How can i load a image by the value of navigation.getParam('Country')?. This Image isn't loading (error code 500)
constructor(props) {
super(props);
this.state = { isLoading: true}
const { navigation } = this.props;
this.number = navigation.getParam('number');
this.country = navigation.getParam('country');
}
return (
<View style={bubble.container}>
<Text>{this.country}</Text>
<Image source={require('./img/flags/'+ this.country +'.png')} style={{width: 30, height: 30}}/>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <View style={bubble.wrapper}>
<Text selectable>{item.text}</Text>
<View style={bubble.footer}>
<View style={{flex: 1}}>
<Text style={bubble.sender}>{item.sender}</Text>
</View>
<View style={{flex: 1}}>
<Text style={bubble.time}><TimeAgo time={item.datetime} interval={20000}/></Text>
</View>
</View>
</View>}
/>
</View>
);

First of all, make sure your img is available in your path of the JS code,
assume your file of the js code is Country.js, so, the structure of your folder should be :
--Country.js (File)
--img (folder)
--flags (folder)
--country.png (an image)
and then, try to change your code look's like this:
render(){
const {country} = this.props.navigation.state.params
return (
<View style={bubble.container}>
<Text>{country}</Text>
<Image source={require('./img/flags/'+ country +'.png')} style={{width: 30, height: 30}}/>
<FlatList
..your setting
/>
</View>
)
}
Don't need to declare the params in constructor, you can declare the param of React Navigation in componentDidMount()/componentWillMount()/ even in render(){}

I have load my image by URL
<Image source={{uri: 'http://192.168.1.222/img/'+ countryvar + '.png'}} style={{width: 30, height: 30}}/>