I want to scroll the view and have a sticky button at the bottom always.
So the requirement are:
ScrollView with items.
Fixed button overlaps scroll view at
the bottom position
Scroll the view and the button need to be
always at bottom of the screen.
The sticky button are always
visible
This is my code:
<ScrollView >
<TouchableOpacity s>
<Image source={..)} />
</TouchableOpacity>
<TouchableOpacity>
<Image source={..)} />
</TouchableOpacity>
<TouchableOpacity>
<Image source={..)} />
</TouchableOpacity>
</ScrollView>
<View style={styles.fabMenuStyle}>
<Image source={..)} />
<Image source={..)} />
<Image source={..)} />
</View>
fabMenuStyle: {
flexDirection: 'row',
position: 'absolute',
bottom: 5,
justifyContent: 'center'
}
The problem is that I can position my buttons view at the bottom of the ScrollView, but I need that to always be visible at the bottom, not only at the end of the ScrollView.
Related
I want to fix the footer on the bottom of the page,
Thats why my whole container was in flex:1 so it takes all the space,
and in my footer, i added position:"absolute",marginBottom:0,, the footer affected so badly which i didnt expect. It goes to up like in the header of the page, then i deleted it,
How can i fix it on bottom of page?
Here is the related code.
<SafeAreaView style={{ flex: 1, backgroundColor:"#ffffff", }}>
{/* Footer */}
<View style={{ flexDirection:"row", alignItems:"center", justifyContent:"space-between",marginHorizontal:35,}}>
<View> // here there are some code
<View>
<Home height={30} width={22} fill={"#1E2439"} />
<Ratio height={30} width={22} fill={"#1E2439"} />
<Time height={30} width={22} fill={"#1E2439"} />
<User height={30} width={22} fill={"#1E2439"} />
</View>
</View>
</SafeAreaView>
Here how the page seen:
Position is from the css language.
{
position:"absolute",
bottom:0
}
here is my code for fixed footer
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
/// some Code
</ScrollView>
// here is bottom bar
<View style={{height: 60, justifyContent: 'center', borderTopLeftRadius: 20, borderTopRightRadius: 20, flexDirection: 'row', alignContent: 'center', alignItems: 'center'}}>
<View style={{flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
//Here is you bottom icon or image
<View>
</View>
</View>
The position is from the CSS language.
{
position:"absolute",
bottom:0,
height: 60
}
on react native i already wrap the image with tag View. the code is below
<View style={{ flexDirection: 'row', marginTop: 3, alignItems:'center' }}>
<Image source={Images.rank} style={{ width: 20, height: 20 }}></Image>
<Text style={[mainstyle.textGrey, mainstyle.fs14, mainstyle.ml5,]}>
{I18n.t('Rank')}:
<Text onPress={() => this._goto('Rank')}
style={[mainstyle.textRed, mainstyle.fs14, mainstyle.bold,
mainstyle.textUnderline]}>
{this.state.monthRank == '' ?
'-' : this.state.monthRank}
</Text>
</Text>
</View>
how i put the text on the center the container and align center with the image to. as we can see the text slightly up
I have a login button and I would like to place a Login text at the center of the button and an image (scaling it properly) on the right edge of the button, far away from the text.
Currently I am using an Icon from the Vector Icons library in the following way:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', paddingLeft: '46%' }}>Login</Text>
<Icon name="arrow-right" color='#fff' size={15} style={{ paddingLeft: '33%' }} />
</View>
</TouchableOpacity>
Which is probably also not the best way to do it. Now I would like to replace the Icon with an Image, so I wrote instead the following code:
<TouchableOpacity style={styles.buttonLoginTouchable} onPress={this.loginUser.bind(this)}>
<View style={{ flexDirection: 'row' }}>
<Text style={{ color: '#ffffff', fontWeight: '700', flex: 0.9 }}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{ height: 10 }} />
</View>
</TouchableOpacity>
This way the image scale and it is placed somehow on the right but it is not anymore horizontally aligned (and I can't understand why).
Does anyone know the best way to achieve the style I am looking for?
use it like this:
<TouchableOpacity style={{flexDirection:"row",alignItems:'center',justifyContent:'center'}}>
<Text style={{flex:.8}}>Login</Text>
<Image source={require('../../common/arrow.png')} resizeMode='contain' style={{flex:.2 }} />
</TouchableOpacity>
See the below simple example to add image in touchableopacity component in react native. It is very simple you need to wrap image component inside the touchableopacity component.
<TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }>
<Image source={require('./images/sample_image_button.png')} style = {styles.ImagesStyle} />
</TouchableOpacity>
This is how I'm showing my image in React-Native:
<View>
<Text style={styles.myTitle}> This is the title 2 </Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="stretch"
/>
</View>
With the resizeMode="stretch" The Image is shown like this:
The same image when displayed with resizeMode="contain" :
<View>
<Text style={styles.myTitle}> This is the title 3</Text>
<Image
style={{ width: null}}
source={require('./images/05.jpg')}
resizeMode="contain"
/>
</View>
resizeMode="contain":
I want the image to be displayed like how it is in the second type, but there are unnecessary margins:
The margins in the first image are perfect but the full image is not shown. I always thought contain will take care of that but it's not helping here. All I want is the entire image to be shown without any extra margins.
Please help. Thanks.
You can use cover, but it will crop part of the image.
To make it work you will need to add a height property to your image:
<View>
<Text>This is the title 3</Text>
<Image
style={{ width: null, height: '100%' }}
source={require('./image.png')}
resizeMode="cover"
/>
</View>
Using React-Native I need to centre my Image and component LYDSceneQuestion:
const SplashScreen = () => {
return (
<View style={styles.container}>
<LYDSceneQuestion text="Welcome to" />
<Image source={theme.images.logo} style={styles.logo} />
<NextButton onPress={onNext} />
</View>
);
};
export default SplashScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
logo: {
flex: 1,
width: 300,
height: 100,
resizeMode: 'contain'
}
});
Currently my image aligns to the bottom, how I can I centre it vertically?
I will suggest a small technique using flex,give your parent view flex one and then arrange the components in separate child views inside it and give them equal flex just like i have done below.
<View style={styles.container,{flex: 1}}>
<View style={{flex: 2}}>
<LYDSceneQuestion text="Welcome to" />
</View>
<View style={{flex: 2}}>
<Image source={theme.images.logo} style={styles.logo}/>
</View>
<View style={{flex: 2}}>
<NextButton onPress={onNext} />
</View>
</View>
I think if you follow this you can centre it vertically.