A simple javascript implementation to add custom, default props to react-native components.
npm install react-native-global-propscss
body {
background-color: 'teal'
}
p {
font-size: 12,
font-family: 'Helvetica Neue'
}
`
or get rid of that ugly line at the bottom of every TextInput in Android?
BLEGH! Now you can!
$3
`bash
npm i react-native-global-props --save
`
$3
__The example source code can be found under example/.__
Once you've installed react-native-global-props, go ahead choose which components you want to add custom props to.
In my example, I want to customize the View, TextInput, Text, Image, and TouchableOpacity.
Go to your highest order component that contains your whole application. __In my case that is example/Main.js.__
First I import the set functions that will allow me to create my custom components.
`js
import {
setCustomView,
setCustomTextInput,
setCustomText,
setCustomImage,
setCustomTouchableOpacity
} from 'react-native-global-props';
`
Then I create the custom props I want to add to each of these components.
`js
// Setting a default background color for all View components.
const customViewProps = {
style: {
backgroundColor: '#d3d3d3' // light gray
}
};
// Getting rid of that ugly line on Android and adding some custom style to all TextInput components.
const customTextInputProps = {
underlineColorAndroid: 'rgba(0,0,0,0)',
style: {
borderWidth: 1,
borderColor: 'gray',
paddingVertical: 5,
paddingHorizontal: 10,
backgroundColor: 'white'
}
};
// Setting default styles for all Text components.
const customTextProps = {
style: {
fontSize: 16,
fontFamily: Platform.OS === 'ios' ? 'HelveticaNeue' : 'Roboto',
color: 'black'
}
};
// Makes every image resize mode cover by default.
const customImageProps = {
resizeMode: 'cover'
};
// Adds a bigger hit box for all TouchableOpacity's.
const customTouchableOpacityProps = {
hitSlop: { top: 15, right: 15, left: 15, bottom: 15 }
};
`
You can pass in any valid props as seen on __react-native__ documentation. All of these props can easily be overridden.
Now plug your custom props into the set functions like so
`js
setCustomView(customViewProps);
setCustomTextInput(customTextInputProps);
setCustomText(customTextProps);
setCustomImage(customImageProps);
setCustomTouchableOpacity(customTouchableOpacityProps);
`
And __Voila__, your react-native components will have these certain props wherever you use them.
Here is an example of me using the components and overriding props. __The below example source code can be found in example/src/App.js__
`js
import React from 'react';
import {
View,
TextInput,
Text,
Image,
TouchableOpacity
} from 'react-native';
const images = {
whosThatCoolCat: require('./img/MyNormPic.jpeg')
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
hiddenText: true
}
}
render() {
return (
react-native-global-props
style={{ width: 80, height: 80, borderRadius: 40 }}
/>
placeholder="Enter text"
onChangeText={(text) => this.setState({ inputValue: text })}
value={this.state.inputValue}
/>
this.setState({ hiddenText: !this.state.hiddenText })}>
Press me to show or hide the input text
{this.state.inputValue}
);
}
}
export default App;
``