NativeExtension is open source framework. Essential cross-platform UI components for React Native
Here is direct link to npm package link
Here is direct link to yarn package link
Here is direct link to github link
Setup with React Native app
Install NativeExtension
npm install native-extension --save
NativeExtension | React Native |
---|---|
v0.0.1 | v0.57 |
import { Header } from 'native-extension';
const ComponentLeft = () =>
<View style={{ flex: 1, alignItems: 'flex-start' }} >
<Image
source={require('../../assets/images/ic_search.png')}
style={{ resizeMode: 'contain', width: 25, height: 25, marginLeft: 10, alignSelf: 'flex-start' }}
/>
</View>;
const ComponentCenter = () =>
<View style={{ flex: 1 }}>
<Image
source={require('../../assets/images/ic_google.png')}
style={{ resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }}
/>
</View>;
const ComponentRight = () =>
<View style={{ flex: 1 }}>
<Image
source={require('../../assets/images/ic_profile.png')}
style={{ resizeMode: 'contain', width: 35, height: 35, marginRight: 10, alignSelf: 'flex-end' }}
/>
</View>;
class App extends Component {
render() {
return (
<View style={styles.container}>
<Header
componentLeft = { ComponentLeft }
componentCenter = { ComponentCenter }
componentRight = { ComponentRight }
navigationBarStyle= {{ backgroundColor: '#215e79' }}
statusBarStyle = {{ barStyle: 'light-content', backgroundColor: '#215e79' }}
/>
</View>
);
}
}
import { Switch } from 'native-extension';
<Switch
height={40}
width={300}
activeText={`Active Text`}
inActiveText={`InActive Text`}
onValueChange={(value: any) => console.log(value)}
/>
import { StarRating } from 'native-extension';
<StarRating
max={5}
initial={5}
onChange={(rating: number) => console.log(rating)}
selectedStar={require('../../../assets/images/icon_star.png')}
unselectedStar={require('../../../assets/images/star_unfill.png')}
config={{
easing: Easing.inOut(Easing.ease),
duration: 350,
}}
stagger={50}
maxScale={1.6}
starStyle={{
width: 11,
height: 11,
margin: 1,
}}
editable={false}
/>