Simple React native buttons (Flat and Raised)

- react native buttons

Simple React Native Buttons
- Flat buttons
- Raised buttons
- Outline buttons
- Rounded buttons

Just copy qbuttons.js in your project !

demo.js

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import {QFlatButton,QRaisedButton} from './components/qbuttons';


export default function App() {
  return (
    <View style={styles.container}>
    <Text
      style={{textAlign: "center", marginBottom: 20, fontWeight: "bold"}}
    > QFlatButton & QRaisedButton </Text>
      <QFlatButton
        onPress={()=>null}
        rounded
        title="Rounded Flat Button"
        backgroundColor="orange"
        titleColor="white"
      />

      <QRaisedButton
        onPress={()=>null}
        title="Normal Raised Button"
        backgroundColor={"green"}
        titleColor={"white"}
      />
      <QFlatButton
        onPress={()=>null}
        rounded
        outline
        borderColor="blue"
        title="Outline Rounded Button"
        titleColor="blue"
      />

      <QRaisedButton
        onPress={()=>null}
        title="Outline Raised Button"
        outline
        borderColor="#fc4903"
        titleColor={"red"}
      />
      <QFlatButton
        onPress={()=>null}
        rounded
        // outline
        borderColor="red"
        title="Custom title & button style"
        backgroundColor="white"
        titleColor="green"
        titleStyle={{fontSize: 12}}
        style={{padding: 30}}
      />

      <Text
      style={{textAlign: "center", marginTop: 20,}}
    > </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

qbuttons.js

import * as React from 'react';
import { Text, TouchableOpacity } from 'react-native';

export class QFlatButton extends React.Component {

  normal = () => {
    return(
      {
          backgroundColor: this.props.backgroundColor,
          justifyContent: "center",
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          padding: 15,
          margin: 10,
          borderRadius: this.props.rounded ? 10 : 3,
          ...this.props.style
      } 
    )
  }

outline = () => {
    return(
      {
          borderColor: "orange",
          borderWidth: 1,
          borderColor: this.props.borderColor,
          justifyContent: "center",
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          padding: 15,
          margin: 10,
          borderRadius: this.props.rounded ? 10 : 3,
          ...this.props.style
      } 
    )
  }

  render(){
    return (
      <TouchableOpacity
        onPress={this.props.onPress}
        style={(this.props.outline) ? this.outline() : this.normal()}
      >
        <Text
          style={{
            color: this.props.titleColor,
            textAlign: "center",
            fontSize: 16,
            ...this.props.titleStyle
          }}
        >
          {this.props.title}
        </Text>
      </TouchableOpacity>
    );
  }
}

export class QRaisedButton extends React.Component {
  normal = () => {
    return(
      {
          backgroundColor: this.props.backgroundColor,
          justifyContent: "center",
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          padding: 15,
          margin: 10,
          borderRadius: this.props.rounded ? 10 : 3,
          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 3,
          },
          shadowOpacity: 0.27,
          shadowRadius: 4.65,

          elevation: 6,
          ...this.props.style
        }
    )
  }

outline = () => {
    return(
      {
          borderColor: "orange",
          borderWidth: 1,
          borderColor: this.props.borderColor,
          justifyContent: "center",
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          padding: 15,
          margin: 10,
          borderRadius: this.props.rounded ? 10 : 3,
          shadowColor: "#000",
          shadowOffset: {
            width: 0,
            height: 3,
          },
          shadowOpacity: 0.27,
          shadowRadius: 4.65,

          elevation: 6,
          ...this.props.style
      } 
    )
  }

  render(){
    return (
      <TouchableOpacity
        onPress={this.props.onPress}
        style={(this.props.outline) ? this.outline() : this.normal()}
      >
        <Text
          style={{
            color: this.props.titleColor,
            textAlign: "center",
            fontSize: 16,
            ...this.props.titleStyle
          }}
        >
          {this.props.title}
        </Text>
      </TouchableOpacity>
    );
  }
}