The workflow of what I am trying to do is the following:
User clicks on hamburger icon and gets a dropdown.
User clicks on rename.
A modal appears with a TextInput and two buttons to accept and cancel.
The problem I am facing is between 2/3. As I click on rename, the modal appears momentarily, but then disappears as the keyboard shows up. Even though I cannot see the modal, my keystrokes still register to the TextInput. When I close the keyboard, the modal appears again.
Here is my code:
<Modal
animationType="slide"
transparent={true}
visible={renaming}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<KeyboardAvoidingView style={styles.modalMask} behavior="padding">
<View style={styles.modalContainer}>
{unitType === 'file' ?
<Text style={styles.modalHeader}>Rename clip:</Text>
:
<Text style={styles.modalHeader}>Rename folder:</Text>
}
<TextInput
style={styles.modalInput}
onChangeText={(newTitle) => this.setState({title: newTitle})}
defaultValue={'tits'}
autoFocus={true}
selectTextOnFocus={true}
keyboardAppearance={'dark'}
maxLength={30}
/>
<View style={styles.modalOptions}>
<TouchableHighlight
onPress={() => {
this.handleCloseModal();
}}
style={styles.modalOption}
>
<Text>CANCEL</Text>
</TouchableHighlight>
<TouchableHighlight
onPress={() => {
this.handleRename(id, unitType)}
}
style={[styles.modalOption, styles.renameOption]}
>
<Text style={{color: 'white'}}>RENAME</Text>
</TouchableHighlight>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
As far as I can see, the problem could be because KeyboardAvoidingView is pushing the Modal up enough to move it away from viewport.
Try passing a negative value to keyboardVerticalOffset as a prop to KeyboardAvoidingView. This prop controls how far up the Modal gets pushed when keyboard comes up.
Example:
<KeyboardAvoidingView style={styles.modalMask} behavior="padding" keyboardVerticalOffset= {-200}>
<View>
Your view
</View>
</KeyboardAvoidingView>
Related
I have this code, in which TouchableOpacity is not working and i don't know why:
const Box = (props) => {
return (
<View>
<TouchableOpacity onPress={() => {props.callBackProp(); props.budCallBackProp(props.name)}}>
<View style={styles.inputBox}>
<Text style={styles.testText}>{props.name}</Text>
</View>
</TouchableOpacity>
</View>
);
}
What is wrong here?
Edit:
At first, i click on this blue button with "budynek" text inside it, which opens something that looks like a list. Then after i click on some option i want it to dissapear, which is what these callbacks are for. I wrapped each option in this TouchableOpacity component but nothing happens after i click it - there is no effect of a click. A view which holds these "Box" component is absolutely positioned. Here is rest of the code:
return (
<View style={styles.rozwijanaPoz}>
<Pusty/>
<Box name={"budynek 1"} callBackProp={props.callBack} budCallBackProp={props.budCallBack}/>
<Box name={"budynek 2"} callBackProp={props.callBack} budCallBackProp={props.budCallBack}/>
<Box name={"budynek 3"} callBackProp={props.callBack} budCallBackProp={props.budCallBack}/>
</View>
);
}
const styles = StyleSheet.create({
rozwijanaPoz: {
position: "absolute",
left: 60,
},
});
And the main container:
<TouchableOpacity onPress={() => setIsVisible(true)}>
<View style={styles.budynekContainer}>
<Text style={styles.budynekTekst}>{budynekText}</Text>
{isVisible ?
<Rozwijana callBack={visibleCallBack} budCallBack={budynekCallBack}/>
: null}
</View>
</TouchableOpacity>
In my app i'm using ScrollView for showing images. Below my ScrollViewcomponent i have two buttons like prev and next. I want to add custom pagination with the buttons. Also my images are coming from an array in a loop. I want 4 images to show at a time. So, the next button should show next 4 images if there are any and prev button should take 4 previous images if there are any. My ScrollView is currently like this:
<View>
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
</View>
Below this i have two buttons.I have created two different fuctions for those. Here's what it's like now:
<View>
<Button
title="Prev"
color="#841584"
onPress={handleClickBackward}
/>
</View>
<View>
<Button
title="Next"
color="#841584"
onPress={handleClickForward}
/>
</View>
How can i manipulate with my list array so that the custom pagination works. I have tried array slice method on next but it removes the first images and i don't find those after pressing prev button.
you can use onNextPress function and add ref in scrolview
const scrollRef = useRef<ScrollView>();
const onNextPress = () => {
scrollRef.current?.scrollTo({
y : 0,//you must increase x or y
animated : true
});
}
return (
<View style={{width:width,paddingHorizontal:10,paddingVertical:20}}>
<ScrollView
ref={scrollRef}//ref
horizontal={true}
showsHorizontalScrollIndicator={false} >
{list.map((item, i)=>(
<Image key={i} source={{uri: item}}
style={{width: 80, height: 80,marginLeft:5}} />
)
)}
</ScrollView>
</View>
);
In react native i'm using "react-native-dropdown-picker" library to make a dropdown, the problem is that when i open the picker it stays under the next view, so i decided to use zindex and i managed to place the picker on top of the next view, the problem is that i can't click on any of the options, when i click any of the dropdown's options, the touch is recognized on the view under the picker.
The following code is the code for the toolbar component where the dropdown is stored.
<View style={styles.toolbar}>
<View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between',width:'100%'}}>
<TouchableWithoutFeedback onPress={() => {props.toggleDrawer()}} >
<View style={styles.menu}>
<View style={styles.menuBar}/>
<View style={styles.menuBar}/>
<View style={styles.menuBar}/>
</View>
</TouchableWithoutFeedback>
{logo}
</View>
<DropDownPicker
items={condominiumsList}
defaultValue={condominium}
containerStyle={{height: 45}}
style={styles.formBoxes}
labelStyle={{fontFamily:'segoeui4',fontSize:14,flex:1}}
dropDownStyle={styles.formBoxes}
onChangeItem={item=>{condominiumInputHandler(item.value)}}
/>
</View>
And this code shows where the toolbar is used and the view thats under it:
<NavigationContainer>
<View style={{...styles.default,...styles.marginTopPhone}}>
<ToolbarLogged toggleDrawer={()=>{navigation.toggleDrawer()}}
idLang={(stringLang==strings_pt)?1:2} lang={stringLang}/>
<DrawerCustom.Navigator drawerContent={props => <DrawerContent langFile={stringLang} lang={(stringLang==strings_pt)? 1 : 0} {...{...props}}/>}>
<DrawerCustom.Screen name='Dashboard' component={makeLayout} initialParams={{ name: stringLang.dashboard}}/>
<DrawerCustom.Screen name='Condominium' component={makeLayout} initialParams={{ name: stringLang.condominium}}/>
<DrawerCustom.Screen name='Profile' component={makeLayout} initialParams={{ name: stringLang.profile}}/>
<DrawerCustom.Screen name='Signout' component={Signout} />
</DrawerCustom.Navigator>
</View>
</NavigationContainer>
The makeLayout function, makes the current layout depending on the name param thats given, and as u can see if i dont use zindex on the superior view of the toolbar, the dropdown gets loaded under the screen given by the makelayout function, and if i use zindex then i cant select any of the options on the dropdown.
I have a very frustrating situation. Trying to get keyboard to disappear and detect onPress event handler in child row.
Here is what my code looks like:
_renderRow = (prediction) => {
return (
<TouchableOpacity onPress={() => {
Keyboard.dismiss();
this.setState({ location: prediction.description });
}}>
<View style={styles.listItemContainer}>
<Text>{prediction.description}</Text>
</View>
</TouchableOpacity>
)
}
render() {
return (
<View style={styles.wrapper}>
{/* style={[this.state.predictions.length > 0 ? styles.searchContainerSuggest : styles.searchContainer]} */}
<View style={styles.searchContainerSuggest}>
<View style={{paddingLeft: 10, height: 45, display: 'flex', justifyContent: 'center'}}>
<TextInput
placeholder="Enter location"
value={this.state.location}
onChangeText={location => this.onChangeLocation(location)}
style={styles.textInput}
/>
</View>
{this.state.predictions.length && this.state.location !== '' ?
<FlatList
keyboardShouldPersistTaps={'handled'}
refreshing={!this.state.loaded}
initialNumToRender={10}
enableEmptySections={true}
data={this.state.predictions}
keyExtractor={(_, index) => index.toString()}
renderItem={ ({item: prediction}) => this._renderRow(prediction) } />
: null}
</View>
</View>
);
}
I probably need a helping hand or two with regards to how to debug this issue.
Looked up several examples on how to deal with hiding the keyboard and allowing a particular selection to be pressed at the same time.
I thought that keyboardShouldPersistTaps would allow for the child selection to be selected. Upon selection, the onPress event handler will trigger and that will be where I call Keyboard.dismiss() to hide the keyboard. Does not seem to work.
In my case, besides adding keyboardShouldPersistTabs='handled' to the FlatList in question, it was also needed to add keyboardShouldPersistTabs='handled' and nestedScrollEnabled={true} to a parent ScrollView like 2 levels above, wrapping the FlatList I intended to get this behavior with. Check out this issue in react-native repo for more info.
For anyone who is running into the same problem as me. Check whether your FlatList or ScrollView is nested in another FlatList or ScrollView.
If yes, then add
keyboardShouldPersistTaps='handled'
to the element as a props as well.
add keyboardDismissMode="none" to FlatList
I am Still New on react-native ,
So what I am tried is make a simple app that
has button when press on it just open alert
as this Code
class MyFirstReactapril extends Component{
render(){
return(
<View style={styles.container}>
<Text style={styles.welcome}> Welcome Nesreen</Text>
<TouchableHighlight style={styles.button} onPress={this.showAlert}>
<Text style={styles.buttonText}>Myalert</Text>
</TouchableHighlight>
</View>
)
}
showAlert(){
Alert.alert('Fast Donation','', [{text : 'Donate now'},{text : 'add to Container'}])
}
}
Now I want to open Modal on button click not just alert
I tried to read this
http://facebook.github.io/react-native/docs/modal.html#content
but I really lost
how can I make modal using react-native ?
You can use modal something like below.
<Modal visible={this.state.isModalOpen}
onRequestClose={() => this.setState({isModalOpen: false})} animationType={"slide"}
transparent={false}>
<View>
//Create your modal view inside this
</View>
</Modal>
In your showAlert() method set isModalOpen as true in your state.