I have buttons that are not located at the same place in iOS and Android.
In Android they are at the middle bottom of the screen (it is what I expect) but in iOS they are at the top of the screen.
Do you know how I can put buttons in iOS at the same place as Android ?
import { Button } from 'react-native-elements';
...
<ImageBackground
key={`image${i}`}
source={{uri: image}}
style={{ width: deviceWidth, justifyContent:'center', alignItems: 'center', flex: 1 }}>
<View style={{flex: 1}}></View>
<Text style={{flex: 1}}> {textToDisplayEnglish[i]} </Text>
<Button
title={textA[i]}
style={{flex: 1}}
type={typeButton[i]}
onPress={() => this.triggerAction(i)}
/>
<View style={{flex: 1}}></View>
</ImageBackground>
you have too many flex:1. It'd be best to avoid using too many of them,unless you need to. try something like this:
import { Button } from 'react-native-elements';
...
<ImageBackground
key={`image${i}`}
source={{uri: image}}
style={{ width: deviceWidth, justifyContent:'center', alignItems: 'center', flex: 1 }}>
<Text> {textToDisplayEnglish[i]} </Text>
<Button
title={textA[i]}
type={typeButton[i]}
onPress={() => this.triggerAction(i)}
/>
</ImageBackground>
hope it helps!
Related
i want to center the image but it seems the justifyContent: 'center' property is not working as i want
I'm learning about flexbox in react-native
Also, I want to ask how can my code run on many different devices without changing the layout. I code on iphone 14 but when I switch to ipad or iphone se, the layout is changed and almost not as expected.
picture
my code
import React from 'react';
import {Dimensions, Image, Text, View} from 'react-native';
import {colors, sizes, spacing} from '../../constants/config';
import Icon from '../../utils/Icon';
const cardWidth = sizes.width / 3;
const cardHeight = 120;
const CartItem = ({list}) => {
return (
<View style={{flex: 1}}>
{list.map((item, index) => {
return (
<View style={{height: '20%'}} key={index}>
<View
style={{
marginLeft: spacing.l,
marginRight: spacing.l,
backgroundColor: 'white',
height: '90%',
borderRadius: sizes.radius,
}}>
<View style={{flexDirection: 'row'}}>
<View style={{justifyContent: 'center'}}>
<Image
style={{
width: cardWidth,
height: cardHeight,
borderRadius: 12,
marginLeft: spacing.m,
}}
resizeMode="stretch"
source={item.image}
/>
</View>
<View style={{marginTop: spacing.m, marginLeft: spacing.l}}>
<Text style={{marginBottom: 8}}>{item.title}</Text>
<Text>{item.price}</Text>
</View>
</View>
</View>
</View>
);
})}
</View>
);
};
export default CartItem;
this is my desired image
Use alignItems instead of justifyContent.
alignItems controls how children are aligned within the cross axis of their container, so in the case of a row within the vertical axis. justifyContent applies to the main axis, so the horizontal for a row.
you can give justifyContent to the upper view
<View style={{flexDirection: 'row', justifyContent:"center"}}>
<View style={{justifyContent: 'center'}}>
<Text style={{marginBottom: 8}}>Image</Text>
</View>
</View>
I am building a registration form in React Native. I have this view.
When keyboard is showing it is pushing my form and image over my title view like this.
What should i do so that it my view doesnot lose its shape. I already tried scrollview and keyboard avoiding view but they are not helping.
Here is my code.
<View style={styles.container}>
<View style={styles.headingContainer}>
<Text style={styles.headingText}>Sign Up</Text>
</View>
<View style={styles.form}>
<View style={{ marginTop: 5, width: '100%', padding: 10 }}>
<Input
name="name"
placeholder="Name"
label="Name"
/>
<View style={styles.buttons}>
<Button onPress={handleSubmit}>
{isLogin ? 'Log In' : 'Sign Up'}
</Button>
</View>
</View>
</View>
<View style={styles.logoCon}>
<Image style={styles.logo} source={Logo} />
</View>
</View>
);
}
export default AuthForm;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
headingContainer: {
justifyContent: 'center',
alignItems: 'center',
width: '100%',
height: '40%',
backgroundColor: Colors.primary800,
marginBottom: '-22%',
},
form: {
backgroundColor: Colors.primary100,
justifyContent: 'center',
alignItems: 'center',
height: 'auto',
width: '100%',
borderTopLeftRadius: 80,
},
logoCon: {
alignSelf: 'center',
height: 100,
width: 100,
marginTop: 'auto',
marginBottom: -15,
},
});
Update: I have solve the above issue, but now I am facing another issue i.e. I have to hide keyboard everytime i try to input text in any of the lower inputs. Also it is pushing my top view up inside the screen. NO scrollview is working. I have tried KeyboardAvoidingView, ScrollView, Animation, KeyboardAwareScrollView so far but got no luck.
PS: I know UIs are different. Its because i have completed the UI and this is the last thing i need to work on.
I have managed to overcome this issue using this npm package: react-native-keyboard-aware-scroll-view
npm install --save react-native-keyboard-aware-scroll-view
Then in your component, the basic usage is like below
return (
<Fragment>
<SafeAreaView style={{flex: 1}}>
<KeyboardAwareScrollView keyboardShouldPersistTaps='always'>
<View style={{flex: 1}}>
//The content
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
</Fragment>
);
If you have a modal, I'd suggest you to use it like that
<Modal
animationType="slide"
transparent={true}
visible={this.state.search_modal_visible}
>
<KeyboardAwareScrollView contentContainerStyle={{flexGrow: 1}}>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
//The content
</View>
</KeyboardAwareScrollView>
</Modal>
In your AndroidManifest.xml, please be sure the line below exists as an attribute for activity tag
<activity
android:windowSoftInputMode="adjustResize"
You can hide keyboard whenever you want like that in your code
Keyboard.dismiss();
The problem here is that you have in your AndroidManifest.xml:
windowSoftInputMode="adjustResize";
Change it to:
windowSoftInputMode="adjustPan"
Note: after this change you'll need run ./gradlew clean in android folder and react-native run-android in your project directory
Try to use KeyboardAvoidingView of react native
I hade the same issue, I used this to just hide the views I don't want to see whenever the keyboard is opened: https://github.com/TIKramer/react-native-hide-onkeyboard
If you found another solution please let me know.
I'm building mobile app connected with videos, and more like snapchat discover. I want to add onPress function to video, so when user will press on it, it will just go to next video.
So I render video like this.
return (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
{this.state.buffering && <ActivityIndicator size="large"/>}
{this.video()}
</View>
);
But when I try to add Touchableopacity to it to be able to press to video, video is not visible. I hear the sounds of video but its not visible.
return (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
{this.state.buffering && <ActivityIndicator size="large"/>}
<TouchableOpacity onPress={this.continue.bind(this, 1)}>
{this.video()}
</TouchableOpacity>
</View>
);
and video function:
return (
<Video
source={{uri: 'http://' + this.state.videos[this.state.plamount].video_path}}
resizeMode="cover"
paused={this.state.pause}
style={StyleSheet.absoluteFill}
onLoad={() => this.setState({buffering: false})}
repeat={true}
onError={() => Actions.reset('main')}
/>
)
Well I found the answer. There can be other answers also but, when I changed
from
return (
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
{this.state.buffering && <ActivityIndicator size="large"/>}
{this.video()}
</View>
);
to
<TouchableOpacity onPress={this.continue.bind(this, 1)} style={{justifyContent: 'center', alignItems: 'center', flex: 1}}>
{this.state.buffering && <ActivityIndicator size="large"/>}
{this.continue()}
</TouchableOpacity>
it worked.. but anyway, there is still question, why video is not visible, if there is a one more wrapper around video?..
I am trying to a background in my react native app and this is my code.
render() {
return (
<View
style={{
alignItems: 'center',
flex:1}}>
<Image
source={darkwallpaper}
style={{
flex: 1,
width: '100%'}}/>
<View
style={{
position: 'absolute',
justifyContent: 'center',
alignItems: 'center'}}>
<ScrollView>
<Text>This is the random Top page</Text>
<Image
source={homemoviespic}
style={{width: '100%'}}/>
<TopMovies />
</ScrollView>
</View>
)
}
Right now, the background shows but the scrollview is not working. I cant scroll and I can see only a few parts of the stuff inside scrollview. Please help.
Found something called ImageBackground that can put image in background and you can just put children in the tag.
<Image> with nested content is no longer supported. Use <ImageBackground> instead.
<ImageBackground style={styles} source={source} resizeMode={resizeMode} >
{children}
</ImageBackground>
I rendered two similar components. Each component has an icon and text, and each of them should not be overlapping. What's wrong with my styling?
import Icon from "react-native-elements/src/icons/Icon";
<TouchableOpacity onPress={_ => playSound(audio)} style={{
flexDirection: 'row',
flexGrow:1,
flex: 1
}}>
<View>
<Icon name="volume-up" color={PRIMARY_BG} size={24}/>
</View>
<View>
<Text style={{
flexGrow: 1,
fontSize: 8,
backgroundColor: GRAY
}}>
[{locale}]{this.props.pronunciation[locale][0]}
</Text>
</View>
</TouchableOpacity>
Here's the output:
Parent container style
headItemContent: {
flex: 3,
flexDirection: 'row',
justifyContent: 'space-between'
},
I am not sure where your images are meant to be, but the problem is the flexDirection you have set. The flexDirection on the touchableOpacity should be column:
flexDirection: "column"
Since yours is row, the images and text are rendering beside each other. There is not enough space so they are over lapping. So change the flexDirection and that should fix it.
Edit - Or add flex to your image and text:
<View style={{flex: 1}}>
<Icon name="volume-up" color={PRIMARY_BG} size={24}/>
</View>
<View style={{flex: 1}}>
<Text style={{
flexGrow: 1,
fontSize: 8,
backgroundColor: GRAY
}}>
[{locale}]{this.props.pronunciation[locale][0]}
</Text>
</View>
Let me know if that helps!