iamdylanngo/native-extension

Native Extension is open source framework, UI component for React Native

Native Extension ·

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

Components

1. Header
2. Switch
3. StarRating

Getting Started

Setup with React Native app

Install NativeExtension

npm install native-extension --save

Compatibility Versions

NativeExtension	React Native
v0.0.1	v0.57

Using

1. Header

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>
    );
  }
}

2. Switch

import { Switch } from 'native-extension';

<Switch
    height={40}
    width={300}
    activeText={`Active Text`}
    inActiveText={`InActive Text`}
    onValueChange={(value: any) => console.log(value)}
/>

3. StarRating

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}
/>