Splash Screen works fine, but i need to add text at the bottom and not able to achieve it, is it possible to add Text at the bottom
PS I am using react native bootsplash library
You could modify the App.tsx file. (Maybe another name in your project).
Below are extracted from its example:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
text: {
fontSize: 24,
fontWeight: "700",
margin: 20,
lineHeight: 30,
color: "#333",
textAlign: "center",
},
bootsplash: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
},
logo: {
height: 89,
width: 100,
},
});
So to align the text to the bottom of the page, you could change the text style properties, such as:
text: {
fontSize: 24,
fontWeight: "700",
lineHeight: 30,
color: "#333",
textAlign: "center",
position: fixed,
bottom: 0,
margin-bottom: 2%, /* Add some space before the border */
}
Related
I am trying to make an element with style={styles.settingsButtonContainer} not to depend on position of other elements on the view, but to be always in the top right corner of the screen. I am trying in this way:
<View style={styles.container}>
<RCActivityIndicator animating={showActivityIndicator} />
<RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
<Text style={styles.title}>Noughts and Crosses</Text>
<Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
<TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
<Text style={styles.buttonText}>New game</Text>
</TouchableHighlight>
<Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
<Field state={fieldState} size={fieldSize} winner={winCombination} onCellPress={onCellPress} />
</ScrollView>
<View style={styles.settingsButtonContainer}>
<TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
<Image source={require('../img/settings.png')} style={styles.settingsIcon} />
</TouchableHighlight>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
},
title: {
textAlign: 'center',
fontSize: 33,
fontFamily: theme.fonts.primary,
color: theme.colors.text
},
button: {
alignItems: 'center',
padding: 5,
margin: 5,
marginLeft: 10,
marginRight: 10,
borderRadius: 20,
height: 35,
justifyContent: 'center'
},
newGameButton: {
backgroundColor: theme.colors.primary,
paddingLeft: 15,
paddingRight: 15,
},
buttonText: {
fontSize: 25,
fontFamily: theme.fonts.primary,
color: theme.colors.text
},
tip: {
textAlign: 'center',
fontSize: 25,
marginLeft: 10,
marginRight: 10,
fontFamily: theme.fonts.primary,
color: theme.colors.text
},
turnContainer: {
textAlign: 'center',
fontSize: 33,
fontFamily: theme.fonts.primary,
color: theme.colors.text,
marginLeft: 10,
},
turn: {
fontSize: 30,
fontFamily: theme.fonts.noughtsAndCrosses,
},
privacy: {
textAlign: 'center',
color: theme.colors.secondaryText,
fontSize: 15,
textDecorationLine: "underline",
marginTop: 20
},
settingsButtonContainer: {
position: 'absolute',
top: 5,
right: 5,
height: 50,
width: 50,
alignSelf: 'flex-end',
},
settingsButton: {
height: 50,
width: 50,
borderRadius: 25,
},
settingsIcon: {
height: 50,
width: 50
},
settings: {
marginTop: 30
},
buttonsContainer: {
flexDirection: 'row',
alignItems: 'center'
}
});
But it just takes a full row for itself, so the ScrollView doesn't take 100% height. How to make it work?
try to wrap the settingsButtonContainer
and use
settingButtonContainerWrapped: {
alignItem: 'flex-end',
flexDirection : 'row',
},
Actually the issue was in another element, that was on top of the ScrollView - it was RCActivityIndicator who took this place. I styled it, and it worked.
Use css:
[eleSelector] {
position: absolute;
right: 0;
top: 0;
}
Check HTML element Selector in CSS
Currently, my username text appears in the center of the view. I want to change it such that it appears on the exact right of the thumbnail. If I remove the alignItems: 'center', from the item, it disturbs the whole style. How else can I fix this?
import { StyleSheet, Alert } from 'react-native';
import { View, Text, Button, Thumbnail } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';
import { moderateScale } from 'react-native-size-matters';
import { TouchableOpacity } from 'react-native-gesture-handler';
return (
<View style={styles.item}>
<TouchableOpacity>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}
/>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>USER NAME</Text>
</View>
<Button
rounded
style={styles.deleteButton}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
);
};
const styles = StyleSheet.create({
item: {
backgroundColor: 'pink',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(70),
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
},
thumbnail: {
height: 70,
width: 70,
position: 'relative',
},
nameContainer: {
//flex: 1,
// alignItems: 'center',
// textAlign: 'center',
},
userName: {
paddingRight: moderateScale(55),
paddingLeft: moderateScale(20),
//textAlign: 'center',
color: 'white',
fontWeight: '900'
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
horizontalLine: {
marginTop: moderateScale(30),
width: '87%',
height: moderateScale(1),
backgroundColor: 'grey',
alignSelf: 'center',
},
});
I tried creating a snack expo but I am unable to use native base in it.
You have added unwanted padding, Change the styles like below and it will place the text next to the Thumbnail.
nameContainer: {
flex: 1,
},
userName: {
color: 'white',
fontWeight: '900'
},
I have a simple textbox to which i have given an outline. However, If you look closely you will see that the border and the border outline dont match. The white color of the View extends out of the border outline as well. How can I fix this?
export const AddressTextBox: React.FunctionComponent<AddressTextBoxProps> = ({
placeName,
}) => {
return (
<View style={styles.textBox}>
<Text style={styles.text}>{placeName}</Text>
</View>
);
};
export const styles = StyleSheet.create({
textBox: {
backgroundColor: 'white',
height: moderateScale(50),
width: '70%',
marginTop: moderateScale(40),
alignSelf: 'center',
borderRadius: moderateScale(20),
borderColor: '#383838',
borderWidth: 0.3,
alignItems: 'center',
flexDirection: 'row',
},
text: {
fontSize: moderateScale(13),
flex: 1,
marginHorizontal: 10,
textAlign: 'center',
},
});
Edit:
The problem doesn't exist in iOS simulator but does occur in Android phones.
I try with this and without moderateScale and it works fine
<View style={{ flex: 1, backgroundColor: 'pink' }}>
<View
style={{
backgroundColor: 'white',
height: 50,
width: '70%',
marginTop: 40,
alignSelf: 'center',
borderRadius: 20,
borderBottomColor: 'red',
borderTopColor: 'red',
borderRightColor: 'red',
borderLeftColor: 'red',
borderWidth: 0.3,
alignItems: 'center',
flexDirection: 'row'
}}>
<Text
style={{
fontSize: 13,
flex: 1,
marginHorizontal: 10,
textAlign: 'center'
}}>
{'vergaminol'}
</Text>
</View>
</View>
I have drawn a horizontal line like this. However, it appears towards the left side of the screen. I don't want to increase the width. How else can I move it to the center? I tried wrapping it with another view along with alignContent: 'center' etc but it didn't work for me.
<View style={styles.horizontalLine}></View>
horizontalLine: {
marginTop: 25,
width: '80%',
height: 1,
//alignContent: 'center',
//width: 1,
backgroundColor: '#E0E0E0',
},
Add an alignSelf:'center' like below
horizontalLine: {
marginTop: 25,
width: '80%',
height: 1,
//alignContent: 'center',
//width: 1,
alignSelf: 'center',
backgroundColor: '#E0E0E0',
}
You can give horizontal margin: auto
horizontalLine: {
// ...
marginLeft: 'auto',
marginRight: 'auto',
// ...
},
Try this...
horizontalLine: {
margin: 'auto',
marginTop: 25,
width: '80%',
height: 1,
backgroundColor: '#E0E0E0',
}
I am using React Native and I have 2 inline buttons, the search and add buttons:
What I need is to create some space between these buttons without affecting the left and right edge.
This is how I am using the JSX:
<View style={globalStyles.stretchContent}>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor },
]}
>
<Text style={{ color: '#fff' }}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor },
]}
>
<Text style={{ color: '#fff' }}>Add</Text>
</TouchableOpacity>
</View>
And the stylesheet:
touchableBtnDropOffItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
As you know React Native uses flexbox and I am having a hard time trying to achieve what I need. The thing is that if I apply margin, it will reduce the width of the buttons on the end of each one. For example: I need the search button to be completely aligned with the text All Passengers List (9). If I apply marginHorizontal it will reduce the width, it will create a margin on both sides of the 2 buttons so it won't be aligned anymore with the text I mentioned.
So, what can I do in this case?
touchableBtnDropOffItem: {
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
flexBasis: 45%,
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
add flexBasis: 45% to the button and add justifyContent: 'space-between' to the stretchContent.
flexBasis is something like width when used inside flexbox
The easiest way to fix this is, keep a width for both the button and use justifyContent: 'space-around' and if want space in between button's left or right too use justifyContent: 'space-between'.
For your example,
touchableBtnDropOffItem: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
width: '40%'
},
stretchContent: {
flex: 1,
color: white,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
},
The simplest thing to do is set the buttons to have a width slightly less than half (45% or 40%), then float each button (float Search to the left, and Add to the right):
(I think the below syntax is correct - if it's not valid React code, please tell me how to fix it).
<View style={globalStyles.stretchContent}>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor; float: left; },
]}
>
<Text style={{ color: '#fff' }}>Search</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
globalStyles.touchableBtnDropOffItem,
{ backgroundColor: Colors.dropOffTabColor; float: right; },
]}
>
<Text style={{ color: '#fff' }}>Add</Text>
</TouchableOpacity>
</View>
And in the stylesheet:
touchableBtnDropOffItem: {
width: 45%,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
alignContent: 'space-between',
height: 36,
marginTop: 20,
borderRadius: 2,
marginHorizontal: 5,
},