DEV Community

Radhakishan Jangid
Radhakishan Jangid

Posted on

react-native-stylish-accordion package

#react #reactnative #accordion #typescript

react-native-stylish-accordion

Simple Stylish React Native Accordion

Table of Contents

Install 

$ npm install react-native-stylish-accordion
Enter fullscreen mode Exit fullscreen mode

or

$ yarn add react-native-stylish-accordion
Enter fullscreen mode Exit fullscreen mode

Now we need to install react-native-reanimated and react-native-animatable.

If you are using Expo, to ensure that you get the compatible versions of the libraries, run:

expo install react-native-reanimated react-native-gesture-handler react-native-redash
Enter fullscreen mode Exit fullscreen mode

If you are not using Expo, run the following:

yarn add react-native-reanimated react-native-gesture-handler react-native-redash
Enter fullscreen mode Exit fullscreen mode

Note

This is created with the help of "react-native-accordion-view" package.

Usage

gif1

import StylishAccordion from 'react-native-stylish-accordion'

export default function App() {
  const [firstOpen, setFirstOpen] = useState(false);
  const [secondOpen, setSecondOpen] = useState(false);

  return (
    <View style={styles.container}>
        <StylishAccordion
        open={firstOpen}
        title="Click me first"
        onPress={() => setFirstOpen(!firstOpen)}
        titleStyle={{ fontSize: 18, fontWeight: "bold" }}
        headerStyle={[styles.accordionHeader]}
        subContainerStyle={[styles.accordionSubContainer]}
        timingTransition={150}
        iconSize={14}
        >
            <View>
            <Text>You clicked me thanks for testing this package, this is my first package, do give it a start in GitHub</Text>
            </View>
        </StylishAccordion>
        <StylishAccordion
            open={secondOpen}
            title="Click me first not that"
            onPress={() => setSecondOpen(!secondOpen)}
            titleStyle={{ fontSize: 18, fontWeight: "bold" }}
            headerStyle={[styles.accordionHeader]}
            subContainerStyle={[styles.accordionSubContainer]}
            timingTransition={150}
            iconSize={14}
        >
            <View>
            <Text>You clicked me thanks for testing this package, this is my first package, do give it a start in GitHub</Text>
            </View>
        </StylishAccordion>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  accordionHeader: {
    backgroundColor: "#ff9d9d",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    marginLeft: 5,
    marginRight: 5,
    marginBottom: 10,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 8,
  },
  accordionSubContainer: {
    backgroundColor: "#fff",
    marginLeft: 5,
    marginRight: 5,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 8,
    marginBottom: 13,
  },
});
Enter fullscreen mode Exit fullscreen mode

Props

  • title (string)
  • titleStyle (TextStyle)
  • iconSize (number)
  • headerStyle (ViewStyle)
  • subContainerStyle (ViewStyle)
  • style (ViewStyle)
  • headerComponent (ReactNode)
  • open (boolean)
  • onPress (void)
  • timingTransition (number default:400) opening speed
  • containerRadius (number)

Top comments (0)

Read next

paharihacker profile image

React Performance Optimization Techniques: Memoization, Lazy Loading, and More

Rajesh Dhiman -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

joshuaamaju profile image

The Right Way to Add Images to Emails in Next.JS

Joshua Amaju -

dee_codes profile image

Setting up Redis in a Next.js Application

Hadiza Mohammed -