I want to move text and images around in react native to custom positions on the webpage. I don't want to use bottom, left, and top etc. because it doesn't land in the same place for different devices.
My code is:
const HomeScreen = ({ navigation }) => {
return (
<View style={styles.container}>
<ImageBackground
style={{width: '100%', height: '100%',}}
source={require('./assets/pexels.jpg')}
>
</ImageBackground>
<Text style={{fontWeight:'600', fontSize: 30}}>
Connect With All Websites On The Internet
</Text>
<Text style={{fontSize: 18}}>Reach 800M Daily Active Users To Whatever Business You Own!</Text>
<TouchableOpacity>
<Text>Log In</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text>Create An Ad</Text>
</TouchableOpacity>
<Button
onPress={() => navigation.navigate('login')}
title="Next Screen"
/>
<StatusBar style="auto" />
</View>
);
};
I haven't moved any of these components around yet they are just sitting in the automatic positions on the webpage. I want to add other images and move it under the image background I already set.
I have the background transparent image (the light blue in the screenshot). The problem is when I type something in the textbox a vertical scroll comes up and the form moves a little bit up. Is it possible that the background moves with the scroll as well?
#1 - in the screenshot is the form that moves
#2 - is the background image
Here is the code
<Container style={styles.container}>
<ImageBackground source={loginbackground} style={{width: '100%',height:'100%' }}>
<Content>
<View style={{marginTop:margint,paddingLeft:30,paddingRight:30}}>
<View style={{marginTop:10}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={emailicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Email" value={this.state.username} onChangeText={ (text) => this.setState({ username: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
<View style={{marginTop:15}}>
<Item style={{backgroundColor:'rgb(149,197,69)',borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Image source={passwordicon} style={{height:20,width:20,marginLeft:10,marginRight:10}}/>
<Input placeholder="Password" secureTextEntry={true} value={this.state.Password} onChangeText={ (text) => this.setState({ Password: text }) } placeholderTextColor="rgb(240,240,240)" />
</Item>
</View>
{this.state.Loading==true?
<ActivityIndicator
animating={true}
style={styles.indicator} />
:
<View>
<View style={{flexDirection:'row',justifyContent:'center',marginTop:15}}>
<View style={{width:'13%',justifyContent:'center'}}>
<TouchableOpacity onPress={() => this._toggleRememberme()}>
<Image source={this.state.isrememberme?checkboxcheck:checkboxuncheck} style={{width:28,height:28}}/>
</TouchableOpacity>
</View>
<View style={{width:'41%',justifyContent:'center'}}>
<Text onPress={() => this._toggleRememberme()} style={{fontSize:17,color:'rgb(56,56,56)'}} >Remember me</Text>
</View>
<View style={{width:'46%',justifyContent:'center'}}>
<Text onPress={() => this.props.navigation.navigate("forgotpass")} style={{textAlign:'right', fontSize:17,color:'rgb(56,56,56)'}} >Forgot password?</Text>
</View>
</View>
<Text onPress={() => this.props.navigation.navigate("signup")} style={{textAlign:'center', textDecorationLine:'underline', fontSize:17,color:'rgb(56,56,56)',marginTop:15}} >Create an Account</Text>
<Button onPress={() => this.signin()} block style={{backgroundColor:'rgb(107,29,43)', marginTop:15,height:50, borderRadius:8,borderWidth:1,borderColor:'rgb(117,170,70)'}}>
<Text style={{color:'#fff',fontSize:19}}>Login</Text>
</Button>
</View>
}
</View>
</Content>
</ImageBackground>
</Container>
Just to clairify, you would like for the form to appear fixed above the image background, and for the form and image background to move together as you scroll. So, currently your background is fixed, but the form is above and scrolls independently of the background?
I just want to make sure I have your question correct :)
I think when you use ImageBackground it will always behave in this way, hence the "background". If you want the form to move with the image you could try to position the form with "absolute" position on top of a regular Image component. You might want to try using react-native-elements or react-native-paper as they have Card and Surface components which can help to achieve this behaviour.
I realize this isn't a very definitive answer but I hope it helps in some way. Also you might want to just check any style props of the components which you have used as well as reviewing the documentation on ImageBackground. https://reactnative.dev/docs/imagebackground
My apologies that I couldn't give you a better answer.
I have a view below flatlist. I want the view to be always at bottom of screen and it is wrapped inside KeyboardAvoidingView. Check video for more details
https://drive.google.com/file/d/1eeMfpH3AV7AqLNqAhlhQX5JmOQSRLbtp/view?usp=sharing
As soon as I comment my FlatList code then the bottom view does not flicker.
Below is my code
<View>
<FlatList ..../>
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
>
<SafeAreaView style={styles.bottomViewStyle}>
<TouchableOpacity>
<Image source={CAMERA_CHAT_ICON} />
</TouchableOpacity>
<View style={styles.textAreaViewStyle}>
<TextInput
placeholder="Start Typing..."
placeholderTextColor="#9b9b9b"
style={styles.textInputStyle}
/>
</View>
<TouchableOpacity>
<Image source={CHAT_SEND_ICON} />
</TouchableOpacity>
</SafeAreaView>
</KeyboardAvoidingView>
</View>
All components including the FlatList component should be wrapped inside the KeyboardAvoidingView. Also, SafeAreaViews should be placed at the root of the screen because it provides padding for SafeAreas.
<KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"}>
<SafeAreaView>
<FlatList ... />
<View>
<TextInput ... />
</View>
</SafeAreaView>
</KeyboardAvoidingView>
See https://reactnative.dev/docs/keyboardavoidingview and https://reactnative.dev/docs/safeareaview for more examples.
How can i solve this issue .
keyboard overlapping like this below
Code Here
<View style={styles.container}>
<View style={styles.Subcontainer}>
<ScrollView contentContainerStyle={styles.scrolViewFlex} ref='scrollView' automaticallyAdjustContentInsets={true} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true}>
<View style={styles.logoView}>
<Image source={require('#images/Icon_K.png')} style={styles.imageStyles} />
</View>
<View style={styles.textInputView}>
<ActivityIndicator
animating = {this.state.animating}
color = '#494949'
size = "large"
style = {styles.activityIndicator}
/>
<View style={styles.namesContainer}>
{/*<View style={styles.exploreContainerDirection}> */}
<View style={styles.pincodeContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
style={[styles.firstnameTextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" First Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'FirstName')}
value={this.state.updateAccountValues.FirstName}
onFocus={this.inputFocused.bind(this,'FirstName')}
onSubmitEditing={(event)=>{
this.refs.SecondInput.focus();
}}/>
</View>
<View style={styles.spaceview}/>
<View style={styles.mobileNoContainer}>
<TextInput
underlineColorAndroid="transparent"
autoCapitalize="words"
ref="SecondInput"
style={[styles.lastnametextInput,{borderColor:this.state.backgroundColor,color: this.state.color}]}
placeholder=" Last Name"
placeholderTextColor="#494949"
returnKeyType='next'
onChangeText={this.handleChange.bind(this,'LastName')}
onFocus={this.inputFocused.bind(this,'LastName')}
value={this.state.updateAccountValues.LastName}
onSubmitEditing={(event)=>{
this.refs.ThirdInput.focus();
}}/>
</View>
{/* </View>*/}
</View>
</ScrollView>
</View>
</View>
So this is my Screen short when i enter in textinput keyboard appers some times like this below screen
So, Please check it once and find Our my Issue
I followed this: Set
android:windowSoftInputMode="adjustPan" in MainfestFile.xml file
React-native: How to control what keyboard pushes up
I'm creating an APP to show points of interest of monuments. Right now I'm rendering the information on a ScrollView (vertical way). The output is like this:
I edited the image, it continues, but I think you get the point.
Here is my code:
return (
<View style={styles.container}>
<View style={styles.contentContainer}>
<ScrollView>
{monumento.pois.map((poi, index) => (
<View key={index} style={{marginBottom: 15}} >
<Tile
imageSrc = {{uri:poi.image}}
contentContainerStyle = {{marginBottom: -30}}
/>
<View style={styles.map}>
<Icon
raised
reverse
name='location-on'
color='#075e54'
size={36}
onPress={() => navigate('Mapa', {monumento: monumento})} />
</View>
<View style={styles.titleContainer}>
<Text style={styles.titleText}>{poi.name}</Text>
</View>
<View style={styles.bodyContent}>
<Text style={styles.bodyText}>{poi.description}</Text>
</View>
</View>
))}
</ScrollView>
</View>
</View>
);
What I want is to scroll normally for one Point of Interest (PoI), but the next PoI I want him to appear by scrooling horizontal (swiping left)...like this:
sample
How can I accomplish that? Thanks!