react-native-collapsing v0.0.2

React Native: react-native-collapsing

• Usage
• License

📖 Getting started

$ npm install react-native-collapsing --save

$ react-native link react-native-vector-icons

💻 Usage

import * as React from 'react';
import { StyleSheet, View } from 'react-native';

import Collapsing from 'react-native-collapsing';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Collapsing
          selected={this.state.selected}
          title="Primo gruppo"
          background="#22252A"
          backgroundBarNormal="#2D3035"
          backgroundBarFocus="#2D3035"
          iconBarNameNormal="videogame-asset"
          iconBarNameFocus="book"
          iconBarColorNormal="#1194ff"
          iconBarColorFocus="#ffb600"
          textBarColorNormal="#1194ff"
          textBarColorFocus="#ffb600"
          iconBarSize={25}
          showOnStart={true}
          animateIconNameNormal="chevron-down"
          animateIconNameFocus="chevron-up"
          animateIconColorNormal="#1194ff"
          animateIconColorFocus="#ffb600"
          badgeText="100"
          badgeColor="#fff"
          badgeBackground="#1194ff"
          badgeRadius={4}
          badgeFunction={e => {
            return e > 99 ? '99+' : e;
          }}
          onPress={e => {
            this.setState({ selected: e.name });
            console.log('1)' + this.state.selected);
          }}
          menu={[
            {
              name: 'sub0',
              title: 'Home page',
              icon: 'home',
              colorText: '#fff',
              colorTextFocus: '#f2a307',
              colorIcon: '#c1c1c1',
              colorIconFocus: '#0480CB',
              background: 'transparent',
              backgroundFocus: '#1E2125',
              badgeText: '1000',
              badgeColor: '#fff',
              badgeBackground: '#1194ff',
              badgeRadius: 4,
            },
            {
              name: 'sub1',
              title: 'Book',
              icon: 'book',
              colorText: '#fff',
              colorTextFocus: '#f9041d',
              colorIcon: '#fff',
              colorIconFocus: '#f9041d',
              //background: '#1194ff',
              backgroundFocus: '#1E2125',
            },
            {
              type: 'menu',
              name: 'sub11',
              title: 'Movie',
              icon: 'film',
              colorText: '#fff',
              colorTextFocus: '#0480CB',
              colorIcon: '#fff',
              colorIconFocus: '#0480CB',
              //background: '#1194ff',
              backgroundFocus: '#1E2125',
            },
          ]}
        />
        <Collapsing
          selected={this.state.selected}
          iconBarNameNormal="videogame-asset"
          iconBarNameFocus="videogame-asset"
          iconBarColorNormal="#0480CB"
          title="Secondo gruppo"
          color="#4CAF50"
          showOnStart={false}
          animateIconNameNormal="chevron-down"
          animateIconNameFocus="chevron-up"
          onPress={e => {
            this.setState({ selected: e.name });
            console.log('2)' + this.state.selected);
          }}
          menu={[
            {
              name: 'sub2',
              title: 'Movie',
              icon: 'home',
            },
            {
              name: 'sub3',
              title: 'Tv',
              icon: 'film',
            },
          ]}
        />
        <Collapsing
          selected={this.state.selected}
          title="Terzo gruppo"
          showOnStart={true}
          onPress={e => {
            this.setState({ selected: e.name });
            console.log('2)' + this.state.selected);
          }}
          menu={[
            {
              name: 'sub4',
              title: 'Theater',
            },
            {
              name: 'sub5',
              title: 'Opera',
              icon: 'film',
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ecf0f1',
    marginTop: 24,
  },
});

💡 Props

Menu

📜 License

This library is provided under the Apache License.