I am trying to use Searchable Dropdown inside a modal in react native.If i use it 'alone' (i mean outside the modal) it works fine.But if i put it inside a modal , its attribute onItemSelect does not seem to work( it does not let me click on anything)
<Modal isVisible={this.state.isBuildingModalVisible}>
<SearchableDropdown
onItemSelect={item => {
this.setState({ building_id: item.id });
}}
containerStyle={{ ...}}
textInputStyle={{
...
}}
itemStyle={{
...
}}
itemTextStyle={{
color: "white",
fontSize: (15 / 411.42) * screen
}}
itemsContainerStyle={{ maxHeight: 140 }}
items={this.state.dataSource}
placeholder="Choose School"
placeholderTextColor="white"
underlineColorAndroid="transparent"
/>
<View
style={{
alignItems: "center",
justifyContent: "center",
flexDirection: "row"
}}
>
<TouchableOpacity
style={styles.button}
onPress={this.toggleBuildingModal}
>
<Text style={{ color: "white" }}>Cancel</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => this.submitpassword()}
>
<Text style={{ color: "white" }}>Execute</Text>
</TouchableOpacity>
</View>
</Modal>
Ok the problem was that react native does not allow you to put SearchableDropdown inside scrollview (if anyone has this problem :P)
Related
<View style={styles.bottomContainer} >
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} onPress = {loginHandler} >
<Text style={styles.buttontext} >LOG IN</Text>
</Pressable>
</Animated.View>
<Animated.View style = {buttonAnimatedStyle}>
<Pressable style={styles.button} >
<Text style={styles.buttontext} onPress = {registerHandler} >REGISTER</Text>
</Pressable>
</Animated.View>
<Animated.View style={[styles.inputformcontainer, formAnimatedStyle ]}>
<TextInput placeholder="Email"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Full Name"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<TextInput placeholder="Password"
placeholderTextColor="#9b1306"
style={styles.textinput}/>
<View style = {styles.formButton}>
<Text style={styles.buttontext}> LOG IN </Text>
</View>
</Animated.View>
</View>
Here is the Styling of above views:
bottomContainer: {
justifyContent: 'center',
height: height / 3,
},
inputformcontainer:{
backgroundColor:'grey',
color: '#000',
marginBottom: 70,
...StyleSheet.absoluteFill,
justifyContent : "center",
},
DETAILS OF THE CODE
so basically I am trying to create an aninated view where the "forminput" container should pop up when user taps on log in or register button. But the problem is that my buttons dont work when because the forminput container lands on top of them somehow (eventho it is invisible). The person I am following used
zIndex: -1
to place it underneath the view but it does not work in android.
PS: I have also tried "elevation" Prop but that doest seem to work either.
<PagerView
style={styles.viewPager}
initialPage={0}
ref={ref}
orientation="horizontal"
offscreenPageLimit={2}
onPageSelected={index => {
setData({
...data,
viewPosition:index.nativeEvent.position
})
}}>
<View key="1">
<Goods/>
</View>
<View key="2">
<Goods/>
</View>
</PagerView>
<View style={styles.bottomView}>
<TouchableOpacity
style={data.viewPosition == 0 ? styles.btnNormal : styles.btnPress}
onPress={() => ref.current.setPage(0)}>
<Text
style={{
alignSelf: 'center',
color: data.viewPosition == 0 ? '#c38063' : '#aaa',
fontSize: 12,
fontWeight: 'bold',
letterSpacing: 1,
}}>
Goods
</Text>
</TouchableOpacity>
<TouchableOpacity
style={data.viewPosition == 0 ? styles.btnPress : styles.btnNormal}
onPress={() => ref.current.setPage(1)}>
<Text
style={{
alignSelf: 'center',
color: data.viewPosition == 0 ? '#aaa' : '#c38063',
fontSize: 12,
fontWeight: 'bold',
letterSpacing: 1,
}}>
Service
</Text>
</TouchableOpacity>
</View>
I am implementing pagerview in my React application and also I have two buttons at the bottom of the page. When user clicks the button I want to change pagerview, also I want to change the button style.
The above code is working with my expectation but the issue is it's taking some amount of time to change button color when pagerview is changed.
How can I fix the delay of changing button colors?
I want to fix an icon inside <ScrollView at right bottom as shown below
But currently , the + icon is moving along with other contents. I want it to be fixed at that position even when other contents go down in the background. Current behaviour
Tried solution :
I used contentContainerStyle={{flexGrow :1}} in the ScrollView , still it doesnt work .
It works when I add the icon outside ScrollView. But it doesn't give expected results which is shown below it cuts the scrolliew content right above the icon:
Can anyone suggest with good solution for this scenario?
Code :
<ScrollView>
{this.state.alertData &&
this.state.alertData.map((item, index) => {
return (
<View>
<TouchableOpacity
style={styles.alertContainer}
onPress={() => this.onCardClick(index, true)}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={styles.title}>{item.title}</Text>
<View
style={{
flexDirection: "row",
}}
>
<Text style={styles.sideText}>Il y a 2h</Text>
{item.status && (
<Away style={{ marginLeft: 5, marginTop: 6 }} />
)}
</View>
</View>
<View style={{ marginBottom: 10 }}>
<Text style={styles.primaryText}>{item.primaryText}</Text>
<Text style={styles.secondaryText}>
{item.secondaryText}
</Text>
</View>
<View>
<Text style={styles.primaryText}>Message</Text>
<Text style={styles.secondaryText}>{item.message}</Text>
</View>
{this.state.selectedCard[index] && (
<Image
style={{ height: 250, width: 300 }}
// source={require("../../../assets/images/image6.jpeg")}
source={item.image}
/>
)}
</TouchableOpacity>
<Close
style={{ top: 10, right: -5, position: "absolute" }}
onPress={() => this.toggleModal(index)}
/>
</View>
);
})}
<View
style={{ alignItems: "flex-end", marginTop: 20, marginBottom: 20 }}
>
<AddnewAlerts />
</View>
</ScrollView>
I an using "import MapboxGL,{MarkerView} from "#react-native-mapbox-gl/maps" for maps.
return (
<MarkerView coordinate={coordinate} key={key} onPress= {()=>console.log("pressed")}>
<View style={{
height: 20,
width: 70,
backgroundColor: '#fff',
borderColor: '#fff',
borderWidth: 3
}}
>
<TouchableHighlight onPress= {()=>console.log("pressed")}>
<Text style={{color:"#000000"}} >{label}</Text>
</TouchableHighlight>
</View>
</MarkerView>
);
};
On press event is not working with marker view here.
Actucally onPress property is not exist on MarkerView check here
https://github.com/react-native-mapbox-gl/maps/blob/master/docs/MarkerView.md
Instead of MarkerView use MapboxGL.PointAnnotation and in this you can use it's onSelected function like that:
<MapboxGL.MapView
ref={(c) => (this._map = c)}>
<MapboxGL.PointAnnotation
onSelected={() => console.log("pressed")}
>
<Image source={require('./assets/marker.png')} />
</MapboxGL.PointAnnotation>
</MapboxGL.MapView>
for more properties requirement check:
https://github.com/react-native-mapbox-gl/maps/blob/master/docs/PointAnnotation.md
I need to define the next view that gets focus once the button is pressed, however, there is no much information in React Native documentation (https://reactnative.dev/docs/view#nextfocusdown).
So far I have something like this:
const ListHeader = React.memo(({
navigation
}) => {
return (
<>
<View
style={{
width: '100%',
backgroundColor: '#338cf7',
height: 70,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
focusable={false}
>
<View
style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
focusable={false}>
<TouchableNativeFeedback
background={VeoHoverBackground}
onPress={() => navigation.navigate('Sidebar')}
>
<View nextFocusDown={next_to_focus_id}>
<CustomIcon
style={{ padding: 10, color: 'white' }} size={22}
name='customize' />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
background={VeoHoverBackground}>
<View focusable={false}>
<Text style={{ color: 'white', marginLeft: 10, fontSize: 18 }}
focusable={false}>VEO Messanger</Text>
</View>
</TouchableNativeFeedback>
</View>
<TouchableNativeFeedback
onPress={() => navigation.navigate('NewMessageView')}
background={VeoHoverBackground}>
<View>
<CustomIcon
style={{ padding: 10, color: 'white' }} size={22}
name='edit-rounded' />
</View>
</TouchableNativeFeedback>
</View>
</>
);
});
How to get the id of the element that has to be focused next? In my case it has to be second TouchableNativeFeedback element.
So I work with React Native so I am not entirely sure if React works the same way, but you have to pass a ref to the nextFocusDown prop. I see you have the id <View nextFocusDown={next_to_focus_id}>but I don't see the where the next_to_focus_id ref is.
So in React Native, for example, I would make a ref with useRef and use the ref prop on TextInput or TouchableOpacity. Here I will use a really simple TextInput example:
```
const emailRef = useRef();
const passwordRef=useRef();
<TextInput
ref={emailRef}
nextFocusDown={passwordRef}>
</TextInput>
<TextInput
ref={passwordRef}>
</TextInput>
```
Hopefully that helps!