How to use react-native-ui-lib - 10 common examples

style={{
            overflow: 'hidden',
            height: INITIAL_WIDTH,
            width: leftPanelWidth, 
            backgroundColor: Colors.rgba(Colors.red20, 0.9), 
            borderRadius: 20
          }}
        >
          {leftPanelWidth > INITIAL_WIDTH &&

size={'xSmall'}
              round
              backgroundColor="transparent"
              iconSource={icon2}
              iconStyle={{tintColor: this.state.selected ? Colors.yellow40 : Colors.white}}
              onPress={() => {
                // console.warn('action 2 press');
                this.setState({selected: !this.state.selected});
              }}
            />
            <button size="{'xSmall'}"> console.warn('action 3 press')}
            /&gt;
          }
        
      
    );
  }
</button>

style={{
          position: 'absolute',
          alignSelf: 'flex-end',
          padding: 20,
          opacity: animationValue,
          transform: [
            {scale: animationValue}
          ]
        }}
      >

style={{
          position: 'absolute',
          alignSelf: 'flex-start',
          padding: 20,
          opacity: animationValue2,
          transform: [
            {scale: animationValue2}
          ]
        }}
      >

fontSize: Typography.text70.fontSize,
        fontFamily: Constants.isAndroid ? 'sans-serif-bold' : '.SFUIText-Heavy',
        alignment: 'center',
      },
      subtitle: {
        color: Colors.white,
        fontSize: Typography.text80.fontSize,
        fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
      },
      backButton: {
        // visible: true,
        color: Colors.white,
        showTitle: Constants.isIOS ? false : undefined,
        testID: 'pop',
      },
      leftButtonColor: Colors.white, 
      leftButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
      rightButtonColor: Colors.white, 
      rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
    },
  };
}

fontFamily: Constants.isAndroid ? 'sans-serif-bold' : '.SFUIText-Heavy',
        alignment: 'center',
      },
      subtitle: {
        color: Colors.white,
        fontSize: Typography.text80.fontSize,
        fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
      },
      backButton: {
        // visible: true,
        color: Colors.white,
        showTitle: Constants.isIOS ? false : undefined,
        testID: 'pop',
      },
      leftButtonColor: Colors.white, 
      leftButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
      rightButtonColor: Colors.white, 
      rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
    },
  };
}

},
      subtitle: {
        color: Colors.white,
        fontSize: Typography.text80.fontSize,
        fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
      },
      backButton: {
        // visible: true,
        color: Colors.white,
        showTitle: Constants.isIOS ? false : undefined,
        testID: 'pop',
      },
      leftButtonColor: Colors.white, 
      leftButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
      rightButtonColor: Colors.white, 
      rightButtonDisabledColor: Colors.rgba(Colors.white, 0.6),
    },
  };
}

* The height of the selected item
     */
    itemHeight: PropTypes.number,
    /**
     * The color of the wheel picker (hex only)
     */
    color: PropTypes.string,
    /**
     * pass custom style for the picker item
     */
    itemStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), //eslint-disable-line
  };

  static defaultProps = {
    labelStyle: {fontSize: Typography.text70.fontSize, fontFamily: Typography.text70.fontFamily},
    color: Colors.blue30
  };

  constructor(props) {
    super(props);
    this.onValueChange = this.onValueChange.bind(this); //eslint-disable-line
    this.getItems();
    DeviceEventEmitter.addListener('log', this.onLogReceived); // TODO: consider moving to a more generic place (base class?)
  }

  state = {
    items: this.getItems(),
  };

  onLogReceived = (event) => {
    console[event.LogType](event.TAG, event.text);
  }