Develop Reference

keyboard is hiding the textinput . React Native (Expo CLI)

keyboard hides the some text input , I'm trying to use keyboardAvoidingView. it has no effect here. ?
this is my code
SEE THE CODE BETWEEN *****
IF I wrap scroll view with keyboardavoidingView or I wrap KeyboardAvoidingView with scroll.. it is not changing anything here, I have tried both
//import statments
return (
<View style={style.MainContainer}>
<View style={style.chooseDpContainer}>
<TouchableOpacity onPress={openImagePickerAsync} style={style.chooseDpContainer}>
{(!ImageUrl)?(<><Avatar.Icon size={70} icon="camera-plus-outline" style={{marginEnd:10}} />
<Text>Choose a cool Dp for your Pet</Text></>):
(<><Avatar.Image size={70} source={{uri:ImageUrl}} style={{marginEnd:10}}/>
<Text>Choose another Image?</Text>
<Button mode="text" icon="delete" style={{fontSize:40}} onPress={()=>{
setImageUrl('')
}}>Remove</Button>
</>
)}
</TouchableOpacity>
</View>
<View style={style.divider} ></View>
<Text style={{marginBottom:10}}>Your Pet Details</Text>
{/* KEYBOARD HIDES INPUT, PLEASE REVIEW THIS CODE*/}
{/* *************************************************** */}
<KeyboardAvoidingView style={{width:'100%'}}
behavior={Platform.OS==="ios"?'padding':"height"}>
<ScrollView style={{width:'100%'}}>
{/* // behavior='position'> */}
<View style={style.Input}><TextInput label="Name"/></View>
<View style={style.Input}><TextInput label="Age"/></View>
<View style={style.Input}><TextInput label="Breed"/></View>
<View style={style.Input}><TextInput label="Gender"/></View>
</ScrollView>
</KeyboardAvoidingView>
{/* KEYBOARD HIDES INPUT, THANKS*/}
{/* *************************************************** */}
</View>
)
}

How to use the radio button for dynamic data in react native

I need to take a list of questions from a json file and dynamically allocate them to radio buttons with answer options.
The problem is that whenever I select an option, all the same options as the other questions are selected.
I'm using the "react-native paper / radio-button-group" lib
Any suggestion?
<ScrollView ref={scrollRef} showsVerticalScrollIndicator={false}>
<View >
{ questions.map(data =>(
<View key={data.key} style={{margin:10}}>
<Text style={{fontWeight:'bold'}}>
{data.quest}
</Text>
<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value} >
<View style={styles.radioBtn}>
<Text>Sempre</Text>
<RadioButton value={1} />
</View>
<View style={styles.radioBtn}>
<Text>Na maioria das vezes</Text>
<RadioButton value={2} />
</View>
<View style={styles.radioBtn}>
<Text>Medianamente</Text>
<RadioButton value={3} />
</View>
<View style={styles.radioBtn}>
<Text>Poucas Vezes</Text>
<RadioButton value={4} />
</View>
<View style={styles.radioBtn}>
<Text>Nunca</Text>
<RadioButton value={5} />
</View>
</RadioButton.Group>
</View>
)) }
</View>
</ScrollView>

How do i wrap all my code in imageBackground

I have the following and i have all the imports added. Please see below code (apologies as a bit of a newbie)
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{ flex: 1, width: '100%' }}
keyboardShouldPersistTaps="always">
<Image
style={styles.logo}
source={require('../../../assets/logo.png')}
/>
<TextInput
style={styles.input}
placeholder='E-mail'
placeholderTextColor="#CBB26A"
onChangeText={(text) => setEmail(text)}
value={email}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TextInput
style={styles.input}
placeholderTextColor="#CBB26A"
secureTextEntry
placeholder='Password'
onChangeText={(text) => setPassword(text)}
value={password}
underlineColorAndroid="transparent"
autoCapitalize="none"
/>
<TouchableOpacity
style={styles.button}
onPress={() => onLoginPress()}>
<Text style={styles.buttonTitle}>Log in</Text>
</TouchableOpacity>
<View style={styles.footerView}>
<Text style={styles.footerText}>Don't have an account? <Text onPress={onFooterLinkPress} style={styles.footerLink}>Sign up</Text></Text>
</View>
</KeyboardAwareScrollView>
</View>
)
}
I want to add a background image to cover everything but still make everything work as normal (so it all sits on top of the image). i cant wrap them with imageBackground because of objects. Any ideas how i can achieve this?

You can create your style and then merge your style with the styles.container.
const wrapperStyle = {
...styles.container,
background: // your code here
}
Then use this wrapperStyle into your View as
<View style={wrapperStyle}>

How to change border color of this circular Button on OnPress?

If I press on any of these Button it's border color should change and rest of should have no color.
Every time i press diffrent button only its border color should change and all other buttons should have no color.
Here is a Image of what I want:-
<View
style={{
flexDirection: 'row',
justifyContent: 'space-evenly',
}}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="calendar-today" size={24} />
<Text>Day to day</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="alarm-light" size={24} />
<Text>Emergency</Text>
</TouchableOpacity>
</View>
<View style={styles.mainview}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.MaterialCommunityIcons name="hammer-wrench" size={24} />
<Text>Planned Works</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.Foundation name="clipboard-pencil" size={24} />
<Text>Survey</Text>
</TouchableOpacity>
</View>
<View style={styles.mainview}>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.FontAwesome name="users" size={24} />
<Text>Meeting</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.Circlebtn}>
<Icon.Entypo name="dots-three-horizontal" size={24} />
<Text>Others</Text>
</TouchableOpacity>
</View>

You can add a variable to your state which holds your pressed button. Let's say
index = 0
After that, each button click, you can update the state. Let's say
const [index, setIndex] = useState(0);
<Button onClick={() => setIndex(1)} />
<AnotherButton onClick={() => setIndex(2)} />
If you check the style of each button according to this index variable, you can add your border to your button.
<Button style={{ borderColor: index === 1 ? 'green' : 'black' }} />
<AnotherButton style={{ borderColor: index === 2 ? 'green' : 'black' }} />
You can try these steps to put a border to your buttons. I hope it works well

TouchableOpacity overwriting other buttons

In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?
return (
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
</TouchableOpacity>
);
},

Change like this? (Wrap the tag except the button?)
return (
<View style={styles.item} key={item.id}>
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
</TouchableOpacity>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},