I need to change the space between lines in a text in a React Native for both android and iOS.
This is the code in the styles pages:
text: {
color: '#C0C0C0',
fontSize: 18,
textAlign: 'justify',
}
Use lineHeight -
text: {
color: '#C0C0C0',
fontSize: 18,
textAlign: 'justify',
lineHeight: 30,
},
You can use
{'\n'}
inside your Text tag
example :
<Text>{'\n'} Heading : </Text>
Related
Im using React Native Elements, and I want a rounded FAB, but it shows a square FAB:
import { FAB } from 'react-native-elements';
<FAB
icon={{
name: 'add',
size: 30,
color: 'white',
}}
placement="right"
/>
How can I do that?
try adding buttonStyle={{borderRadius:1000,}}
<FAB
icon={{
name: 'add',
size: 30,
color: 'white',
}}
placement="right"
buttonStyle={{borderRadius:1000,}} />
I'm attempting a theme type system, where i can create themes as json files, and then style my app based on it. For the most part all of it works except 2 parts for some reason,
Text Color
Background Colors
So everything else is styled correctly, but the backgroundColor and text colors just wont for some reason. I have checked multiple times over that the theme's values are available, console.log prints them fine too. There's no error message, and other styling from the theme works fine.
Here's where i load in the themes
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
let theme = {};
function loadDefaultTheme() {
parseTheme(themes.DEFAULT);
}
function parseTheme(json) {
theme.name = json.name;
theme.backgroundColor = json.backgroundColor;
theme.navBackgroundColor = json.navBackgroundColor;
theme.blueColor = json.blueColor;
theme.redColor = json.redColor;
theme.darkBlueColor = json.darkBlueColor;
theme.placeholderColor = json.placeholderColor;
theme.buttonTextColor = json.buttonTextColor;
theme.textColor = json.textColor;
theme.iconColor = json.iconColor;
theme.iconActiveColor = json.iconActiveColor;
theme.navTextColor = json.navTextColor;
theme.navActiveTextColor = json.navActiveTextColor;
}
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
Here's my styling
const welcomeStyles = StyleSheet.create({
background: {
flex: 1,
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT
},
logo: {
width: '50%',
height: '50%',
alignSelf: 'center'
},
text: {
color: ThemeParser.theme.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
appNameText: {
fontWeight: 'bold',
fontSize: 30,
marginTop: -60
},
descText: {
fontSize: 22
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.theme.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
}
});
Finally, my theme:
{
"name": "Default",
"backgroundColor": "#1D1D1D",
"navBackgroundColor": "#343434",
"blueColor": "#05b7ed",
"redColor": "#FF5757",
"darkBlueColor": "#047A9E",
"placeholderColor": "#545454",
"buttonTextColor": "white",
"textColor": "white",
"iconColor": "#047A9E",
"iconActiveColor": "#05B7ED",
"navTextColor": "#C1C1C1",
"navActiveTextColor": "white"
}
I have this bit elsewhere but this works for some reason...
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} />
Edit: Components which the styles are not being applied. They work fine when i statically type a color like 'white' or '#1d1d1d'
<View style={styles.loginStyles.loginView}>
<Input
placeholder='Token'
placeholderTextColor={ThemeParser.theme.placeholderColor}
returnKeyType='done'
inputStyle={styles.loginStyles.token}
leftIcon={<Ionicons name='md-key' size={32} color={ThemeParser.theme.blueColor} />}
onChangeText={text => this.setState({token: text})}
/>
<View style={{flex: 1, justifyContent: 'flex-end'}}>
<View style={{flexDirection: 'row'}}>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.blueColor, borderRightColor: 'black', borderRightWidth: 4}]} onPress={() => AniListAuth.getALCode()}>
<Text style={global.globalStyles.buttonText}>Get Code</Text>
</TouchableOpacity>
<TouchableOpacity style={[global.globalStyles.halfButton, {backgroundColor: ThemeParser.theme.redColor}]} onPress={() => AniListAuth.login(this.state.token)}>
<Text style={global.globalStyles.buttonText}>Sign In</Text>
</TouchableOpacity>
</View>
</View>
The background color for the TouchableOpacity seems to work fine, but not for the View background color or Text color
Edit2: Here's a snack of the project thus far if my code above isn't as clear... http://snack.expo.io/Hk1_2AOtr
Check out the working snack.
This is because you are exporting the theme object before you are parsing it.
Your theme object is empty when you are exporting but you are parsing and adding properties to your object after it is exported which means you are calling themeParser.loadDefaultTheme() later in your code, by the time the empty theme object has already been exported.
It would be better if you use your themes object in your ThemeParser.js file:
const themes = {
DEFAULT: require('./../assets/themes/default.json')
};
module.exports = {
themes: themes,
theme: theme,
loadDefaultTheme: loadDefaultTheme,
parseTheme: parseTheme
};
and use it in GlobalStyles like so:
buttonText: {
color: ThemeParser.themes.DEFAULT.textColor,
fontWeight: 'bold',
fontSize: 20
}
And in WelcomeStyles like so:
text: {
color: ThemeParser.themes.DEFAULT.textColor,
alignSelf: 'center',
fontFamily: 'Arial',
},
loginView: {
width: Info.WINDOW_WIDTH,
height: Info.WINDOW_HEIGHT * 0.6,
backgroundColor: ThemeParser.themes.DEFAULT.backgroundColor,
borderTopColor: '#FE5656', borderTopWidth: 4,
paddingTop: 25
},
You can make the checks according to your needs when you want to load the themes object or theme object.
On react-native iOS, "react-native-linear-gradient": "^2.0.0".
After installing correctly this package with npm then using 'react-native link', i see a red border around my text but not any gradient with the example provided.
import LinearGradient from 'react-native-linear-gradient';
// Within your render function
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
Please check this out
https://alligator.io/react/gradient-border-react-native/
I have solved this problem from this blog.
Code Example :
<LinearGradient
colors={["#FFA500", "#C5121B"]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={{ borderRadius: 5 }}
>
<View style={styles.registerButtonStyle}>
<Text>Register</Text>
</View>
</LinearGradient>
registerButtonStyle: {
paddingLeft: 16,
paddingRight: 16,
paddingBottom: 7,
paddingTop: 7,
margin: 1,
backgroundColor: "white",
borderRadius: 5
},
Solved in my case with RN 0.41.2: run this command in the terminal 'react-native run-ios' for recompiling with xCode (necessary in general after a 'react-native link' command)
I'm creating a custom "Navigation bar" for my app and I need the following layout:
| ================================== |
| ICON TWO LINES TEXT |
| TWO LINES TEXT |
| ================================== |
The two <Text> fields should be at the center of the status bar and the icon on the right
That's how it looks like now:
Current layout
and in the inspector its how it looks
View inspector
as you can see the text is at the center of his space, but I want to be at the center of the entire component.
That's the code right now:
const styles = {
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#64619b',
height: 64,
paddingTop: 10,
},
title: {
color: 'white',
fontSize: 17,
},
belowTitle: {
color: 'white',
fontSize: 20,
fontWeight: 'bold',
},
backButton: {
width: 32,
height: 32,
alignSelf: 'center',
marginLeft: 16,
},
textContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
},
};
class NavigatorHeader extends React.Component {
render() {
return <View style={[styles.container, this.props.style]}>
<TouchableOpacity onPress={this.onBackPress.bind(this)}>
<Icon name="ion|ios-arrow-back" size={32} color="white" style={styles.backButton} />
</TouchableOpacity>
<View style={styles.textContainer}>
<Text style={styles.title}>{this.props.title}</Text>
{this.props.belowTitle && <Text style={styles.belowTitle}>{this.props.belowTitle}</Text>}
</View>
</View>;
}
}
You could handle this by making it three views across. Put you button in the left, text in the center and then leave the right one empty. Then do "flex: 0.25" for the left and right then put "flex: 0.5" for the center. You can of course increase or decrease the two sides just make sure the center is whatever is left to get to 1.0
I am making an app with a sliding menu on the left (see http://mobile.tutsplus.com/tutorials/appcelerator/titanium-mobile-create-a-sliding-menu-for-ios/). And I'm trying to add a background to the rows, but every time I try that and I start the simulator, the background can only be seen a little bit because there's a white background behind the title of the row for some reason. Here's the code:
var menuTitles = [
{title: 'Home', backgroundImage: "images/row_BG.png", id: 1},
{title: 'Vestigingen', height: 30, font:{fontSize: 14, fontWeight: "bold", fontFamily: "Helvetica"}},
{title: 'Han Fortmann', backgroundImage: "images/row_BG.png", leftImage: 'images/HF_Logo_#2x.png', id: 2, font:{fontSize: 14, fontWeight: "normal", fontFamily: "Helvetica"}},
{title: 'Johannes B.', leftImage: 'images/JB_Logo_#2x.png', id: 3, font:{fontSize: 14, fontWeight: "normal", fontFamily: "Helvetica"}}
];
Maybe you should precise the Titanium version you're using to get more accurate answers.
Nevertheless, I think the answer you're looking for is the backgroundColor: 'transparent' property. Try this, and it should work :
{backgroundColor: 'transparent', title: 'Home', backgroundImage: "images/row_BG.png", id: 1}