react-native-slider-design v0.0.4

react-native-slider-design

A react-native component customable developed in typescript !

Instalation

npm -i react-native-slider-design

or

yarn add react-native-slider-design

Basic Usage

Becarful the basic usage use the package react-native-vector-icons package to render SVG icons. If you are not using this package you also can use any component you want.

import React, { Fragment } from 'react';
import {
  SafeAreaView,
} from 'react-native';
import Icon from 'react-native-vector-icons/dist/FontAwesome';

import Slider from './src/Slider/Slider';

const datas = [
  {
    onPress: (id: any) => (console.log(id)),
    id: 0,
    icon: <Icon name="rocket" size={30} color="#900" />,
  },
  {
    onPress: (id: any) => (console.log(id)),
    id: 1,
    icon: <Icon name="ambulance" size={30} color="#100" />
  },
  {
    onPress: (id: any) => (console.log(id)),
    id: 2,
    icon: <Icon name="anchor" size={30} color="#723900" />
  }
]

const App = () => {
  return (
    <Fragment>
      <SafeAreaView style={{ backgroundColor: '#003972', justifyContent: 'center', flex: 1 }}>
        <Slider datas={datas}
          staticDesign
          style={{
            container: {
              marginTop: '2%',
            }
          }}
        />

        <Slider datas={datas}
          style={{
            container: {
              marginTop: '2%',
            }
          }}
        />
        <Slider datas={datas}
          opacity
          style={{
            container: {
              marginTop: '2%',
            }
          }}
        />
      </SafeAreaView>
    </Fragment>
  );
};

export default App;

Props

MIT Licensed