react-native-popin-button v1.0.2

react-native-popin-button

Button wrapper for React Native that shrinks/expands when you press it

Installation

$ npm i react-native-popin-button --save

Demo

Example

import React from 'react'
import { Text, View } from 'react-native'
import PopinButton from 'react-native-popin-button'

const styles = {
  container: {
    justifyContent: 'space-around',
    alignItems: 'center',
    flex: 1
  },
  roundButton: {
    backgroundColor: 'lightblue',
    padding: 30,
    borderRadius: 20
  },
  shrink: {
    backgroundColor: 'maroon',
    padding: 30,
  },
  big: {
    backgroundColor: 'orange',
    padding: 30,
    borderRadius: 100,
    shadowColor: 'grey',
    shadowOpacity: 1,
    shadowRadius: 10,
  },
  text: {
    color: '#fff',
    fontSize: 24
  }
}

const App = () => {
  return (
    <View style={styles.container}>
      <PopinButton onPress={() => console.log('woohoo')} style={styles.roundButton}>
        <Text style={styles.text}>Normal</Text>
      </PopinButton>
      <PopinButton onPress={() => console.log('small')} shrinkTo={0.5} style={styles.shrink}>
        <Text style={styles.text}>Shrink</Text>
      </PopinButton>
      <PopinButton onPress={() => console.log('big')} shrinkTo={1.5} style={styles.big}>
        <Text style={styles.text}>Expand</Text>
      </PopinButton>
    </View>
  );
};
export default App;

Properties

License

MIT