rn-karuselli v1.0.6

React native karuselli

Swipeable component with paging.

Installation

npm install rn-karuselli

yarn add rn-karuselli

Usage

Karuselli works as horizontal FlatList. You can use it as it is or as modal

Add a "key" props for each view

<Karuselli
  views={[<Landing key={0} />, <SignIn key={1} />, <Next key={2} />]}
  colors={colors}
  dotColor={"#d3d3d3"}
/>

As modal:

function App() {
  const [visible, setVisible] = useState(true)
  const handleModalClose = () => {
    setVisible(!visible)
  }

  const Landing = () => {
    return (
      <View>
        <Text>Landing</Text>
      </View>
    )
  }

  const Info = () => {
    return (
      <View>
        <Text>Info</Text>
      </View>
    )
  }

  const Next = () => {
    return (
      <View>
        <Text>Next</Text>
        <TouchableHighlight onPress={() => handleModalClose()}>
          <Text>Close modal</Text>
        </TouchableHighlight>
      </View>
    )
  }

  return (
    <View style={{ flex: 1 }}>
      <Karuselli
        views={[<Landing key={0} />, <SignIn key={1} />, <Next key={2} />]}
        dotColor={"#c51c51"}
        colors={["red", "white", "gold"]}
        visible={visible}
        handleModalClose={handleModalClose}
      />
    </View>
  )
}

Properties

Contact

Email: joonas.aaltonen16@gmail.com