I have a text input in an overlay in my react native application. I used keyboardavoidingview to make sure the keyboard doesn't cover my submit button but the entire overlay is not moving with the keyboard only the inside content is moving. Heres an image of what is happening. Is there any way to move the overlay with the content too?
This is my code
<Overlay overlayStyle={{borderRadius:15,backgroundColor:'#f8f8f8',paddingTop:20,paddingLeft:20,height:300}} isVisible={showrevoverlay} onBackdropPress={()=>{resetoverlay()}}>
<KeyboardAvoidingView keyboardVerticalOffset={300} style={{flex:1,alignItems:'center',justifyContent:'center'}} behavior="padding">
<View style={{flexDirection:'column',justifyContent:'space-evenly',alignItems:'center'}}>
<Text style={{fontWeight:'bold',textAlign:'left',width:'100%'}}>Review:</Text>
<TextInput
placeholder="Write review"
style={{alignItems:'center',justifyContent:'center'}}
style={{ height: 200,width:300, borderColor: 'gray',backgroundColor:'#eef4f6',marginTop:10}}
onChangeText={text => setreview(text)}
value={review}
/>
<TO onPress={()=>{saveReview()}} style={{marginTop:10,width:100,height:50,backgroundColor:'#4B53F2',justifyContent:'center',alignItems:'center'}}><Text style={{fontFamily:'Montserrat-Bold',color:'white',fontSize:15}}>Submit</Text></TO>
</View>
</KeyboardAvoidingView>
</Overlay>
Here is the solution to solve this problem. you can add your code.
import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';
const windowHeight = Dimensions.get('window').height;
export default class Overlay extends Component {
render(){
return(
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
<View style={{width:'100%', height:windowHeight }}>
/*Every thing inside this will shift up with out changing style */
</View>
</ScrollView>
</View>
)
}
}
Related
Actually , i am using too many Views , Text TextInput of width 100% due to this even i scroll it automatically touch to the TextInput and due to this i am not able to scroll to the screen . Is there any solution for this?
Try to give margin to left and right so that you can scroll. Also you can apply below solution as well:
<ScrollView contentContainerStyle={{flexGrow: 1}}
keyboardShouldPersistTaps='handled' //<-
>
<TextInput keyboardType='numeric'/>
</ScrollView>
OR
import {Keyboard} from 'react-native'
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{flex: 1}}>
<TextInput keyboardType='numeric'/>
</View>
</TouchableWithoutFeedback>
OR
render() {
<DismissKeyboardView>
<TextInput keyboardType='numeric'/>
</DismissKeyboardView>
}
OR
In most of my cases, this solution surely works:
import { Keyboard } from 'react-native'
// Hide that keyboard!
Keyboard.dismiss()
I am currently developing an application that enables the user to view sports videos and I would like to implement the following feature :
The user is presented with a list of videos but can only see the next ones if he first views the first ones. At the moment I have simply added a lock on the thumbnail of the videos that should be blocked but the user can still click a bit aside and play the video. I have look through all the props of the package react-native-video but didn't see any that would fit my need. At
Would you have ideas ?
Here is also a sample of the code :
<View style={styles.videoRow}>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
/>
{!debloque3 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
/>
{!debloque4 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
</View>
Yeah, a really easy way you can do this is just prevent the thing you don't want to the user to tap on from receiving any pointerEvents (i.e. touch events).
A really simple quick-and-dirty way of doing this like so:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
{/* Obscure the TouchableOpacity with a View which completely covers it */}
{shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
</View>
</View>
);
Alternatively, you could also just wrap the <Video /> component within a <View /> and useState to toggle between pointerEvents="none" and pointerEvents="auto". Both have the same effect of preventing touch information from being passed to children:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View
pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
</View>
</View>
);
Depends what you prefer.
You could reuse the logic you have for showing the lock or not on the video element, and render the video only if it is unlocked.
<View>
{
debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
}
</View>
Alternatively you could set the source of the video to null until it is unlocked, to initialize the player but prevent anything to be played, according to the docs.
I am using react navigation v5 to create my modal.
I want my modal to show in the beginning of 50% height, and when I press a button I want my modal to have 100% height. And toggle 50% to 100% to 50% back and forth.
However, I am unsure how to do this.
My code looks something like this.
Navigation
render(){
return (
<NavigationContainer>
<RootStack.Navigator mode="modal" headerMode = "none">
<RootStack.Screen name="home" component = {Home} />
<RootStack.Screen name="modala" component={ModalA}
options={{cardStyle: {backgroundColor: "transparent"}}}/>
</RootStack.Navigator>
</NavigationContainer>
);
}
As you can see I want my modalA to overlap Home component in the beginning as 50% width and if i press a button inside ModalA, I want my modal to be 100%. Is this possible?
Yes, its possible. To show the modal on the initial screen you must create this Modal Component on that screen
e.g
import React, { Component, useState } from 'react';
import {View, Text} from 'react-native';
import Modal from "react-native-modal";
const Home = (props) => {
const [height, setHeight] = useState('50%');
return (
<View>
<Modal isVisible={true}>
<View style={{ height, width: "80%", justifyContent: 'center', alignItems: 'center'}}>
<Text>I am the modal content!</Text>
<TouchableOpacity onPress={() => setHeight("50%")}>
<Text>Set 50% Height</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => setHeight("100%")}>
<Text>Set 100% Height</Text>
</TouchableOpacity>
</View>
</Modal>
</View>
);
}
I have a TextInput with multiLine true. However, after two lines the text disappear behind the keyboard. I have tried wrapping the TextInput in KeyboardAvoidingView, but it doesn't work.
The keyboard does push up the TextInput when I unfocus the TextInput and then click on the bottom line. Any idea how I can make the last line of the TextInput stay on top of the keyboard?
The code:
<View style={styles.descriptionFlexStyle}>
<Text
style={[
styles.headerTextStyle,
{ marginTop: Window.height * 0.04 }
]}> Please fill in a reason </Text>
<ScrollView>
<TextInput
style={styles.reasonTextInput}
placeholder="Reason"
value={reasonText}
multiline={true}
onChangeText={input =>
this.setState({
reasonText: input
})
}
underlineColorAndroid="transparent"
ref="reasonTextInput"
/>
</ScrollView>
</View>
hello my dear you must use KeyboardAvoidingView Component from React-Native and put a behavior on it like below :
<KeyboardAvoidingView behavior={'postion' || 'height' || 'padding'}>
<View style={styles.descriptionFlexStyle}>
<Text
style={[
styles.headerTextStyle,
{ marginTop: Window.height * 0.04 }
]}> Please fill in a reason </Text>
<ScrollView>
<TextInput
style={styles.reasonTextInput}
placeholder="Reason"
value={reasonText}
multiline={true}
onChangeText={input =>
this.setState({
reasonText: input
})
}
underlineColorAndroid="transparent"
ref="reasonTextInput"
/>
</ScrollView>
</View>
</KeyboardAvoidingView>
This answer may be a little too late. However, I have found a workaround without using the KeyboardAvoidingView component. A ScrollView could be used instead to scroll the multiline TextInput to the top to have the 'keyboard avoiding' effect. I would use the ref measure() method to get the top y value of the TextInput, before using the scrollTo() method to scroll the TextInput directly to the top of the screen, effectively avoiding the keyboard.
import React, { useRef } from "react";
import { ScrollView, TextInput, View } from "react-native";
export default function Test() {
const scrollViewRef = useRef(null);
const viewRef = useRef(null);
const handleFocus = () => {
viewRef.current.measure((x, y) => {
scrollViewRef.current.scrollTo({ x: 0, y });
});
};
return (
<ScrollView ref={scrollViewRef}>
{/* View to fill up space */}
<View
style={{
width: "80%",
height: 600,
}}
/>
<View ref={viewRef}>
<TextInput
onFocus={handleFocus}
multiline={true}
style={{
width: "80%",
height: 100,
backgroundColor: "whitesmoke",
alignSelf: "center",
}}
/>
{/* View to fill up space */}
<View
style={{
width: "80%",
height: 600,
}}
/>
</View>
</ScrollView>
);
}
Ok i have finally solved it using "KeyboardAvoidingView". I did two things. First i removed the height on my TextInput and then i set the behavior attribute on the "KeyboardAvoidingView" to "padding". Works perfect for me now. Let me know if this help! :)
How can I insert and style a button in text input in react native like this:
Can I use any code like this?
<Textinput>
<Button></Button>
</Textinput>
Sorry for the delay, but something like this should work:
<View style={{flexDirection:'row', width: window.width, margin: 10, padding:4, alignItems:'center', justifyContent:'center', borderWidth:4, borderColor:'#888, borderRadius:10, backgroundColor:'#fff'}}>
<View style={{flex:4}}>
<TextInput
onChangeText = {(textEntry) => {this.setState({searchText: textEntry})}}
style={{backgroundColor:'transparent'}}
onSubmitEditing = {()=>{this.onSubmit(this.state.searchText)}}
/>
</View>
<View style={{flex:1}}>
<Button onPress={ () => this.onSubmit(this.state.searchText) }>
<Image source={ require('../images/searchImage.png') } style={ { width: 50, height: 50 } } />
</Button>
</View>
</View>
where you adjust the size based on your image and Button is imported like:
import Button from '../components/Button';
I like to keep the button in an external folder, where it is like:
import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
class Button extends Component {
handlePress(e) {
if (this.props.onPress) {
this.props.onPress(e);
}
}
render() {
return (
<TouchableOpacity
onPress={ this.handlePress.bind(this) }
style={ this.props.style } >
<Text>{ this.props.children }</Text>
</TouchableOpacity>
);
}
}
export default Button;
Good luck!
wrapping both in a View with flexDirection:row should get you there.
If you want to get more advanced, you could look at the react-native-textinput-effects package that will give you some very nicely styled inputs.
<View style={{flexDirection:'row'}}>
<View>
<TextInput
style={{alignItems:'center',justifyContent:'center',backgroundColor:'white'}}
value = {this.state.searchString}
onChangeText = {(searchString) => {this.setState({searchString})}}
placeholder = 'Search'
keyboardType = 'web-search'
onSubmitEditing = {()=>{this._fetchResults()}}
ref = 'searchBar'
/>
</View>
<TouchableHighlight style={{alignItems:'center',justifyContent:'center'}} onPress = {()=>{this._fetchResults()}} underlayColor = 'transparent'>
<View>
<Icon name="search" size = {20} color = "#4285F4" />
</View>
</TouchableHighlight>
</View>
if you are not using react-native-vector-icons replace icon with .png magnifying glass image