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