@volkenomakers/react-native-accordion
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

react-native-accordion

Single select

Add it to your project

  • Using NPM npm install @volkenomakers/react-native-accordion
  • or:
  • Using Yarn yarn add @volkenomakers/react-native-accordion

Usage

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import Accordition from "@volkenomakers/react-native-accordion";
export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="default" />
      <Accordition
        containerStyle={{ backgroundColor: "rgba(0,0,0,.03)", padding: 2 }}
        titleStyle={{ padding: 20, fontSize: 18 }}
        title="Collapsible Group Item #1"
      >
        <Text style={{ padding: 20, backgroundColor: "#FFF" }}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
          skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
          Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
          single-origin coffee nulla assumenda shoreditch et. Nihil anim
          keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
          sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
          occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
          you probably haven't heard of them accusamus labore sustainable VHS.
        </Text>
      </Accordition>
      <Accordition
        containerStyle={{
          backgroundColor: "rgba(0,0,0,.03)",
          padding: 2,
          marginVertical: 5,
        }}
        titleStyle={{ padding: 20, fontSize: 18, color: "#F00" }}
        iconStyle={{ tintColor: "#F00" }}
        title="Collapsible Group Item #2"
      >
        <Text style={{ padding: 20, backgroundColor: "#FFF" }}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
        </Text>
      </Accordition>
      <Accordition
        containerStyle={{
          backgroundColor: "rgba(0,0,0,.03)",
          padding: 2,
          marginVertical: 5,
        }}
        titleStyle={{ padding: 20, fontSize: 18 }}
        icon={{ uri: "http://cdn.onlinewebfonts.com/svg/img_317357.png" }}
        title="Collapsible Group Item #3"
      >
        <Text style={{ padding: 20, backgroundColor: "#FFF" }}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
        </Text>
      </Accordition>
      <Accordition
        containerStyle={{
          backgroundColor: "rgba(0,0,0,.03)",
          padding: 2,
        }}
        showIcon={false}
        title="Collapsible Group Item #3"
        titleStyle={{ padding: 20, fontSize: 18 }}
      >
        <Text style={{ padding: 20, backgroundColor: "#FFF" }}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
        </Text>
      </Accordition>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40,
    padding: 15,
    backgroundColor: "#fff",
  },
});

Properties

Property name Type Description
containerStyle Object Styles for the container
titleStyle Object Styles for the title
icon ImageSource the source image of the icon
iconStyle Object custom Styles for the icon
showIcon Boolean show or hide the icon dafault to true
title string or ReactElement the title of the accordition it can be string or component like title

ISC Licensed

Package Sidebar

Install

npm i @volkenomakers/react-native-accordion

Weekly Downloads

3

Version

1.0.0

License

ISC

Unpacked Size

19.3 kB

Total Files

9

Last publish

Collaborators

  • volkenomaker