@zt-mobile/react-native-quick-controls

1.0.15 • Public • Published

react-native-quick-controls

Getting started

$ npm install react-native-quick-controls --save

Mostly automatic installation

$ react-native link react-native-quick-controls

Usage

import React from "react"
import { View, Text, Image } from "react-native"
import QuickControls from 'react-native-quick-controls';

const QuickControlsApp = props => {

    return (
        <QuickControls
            duration={300}
            landscapeStyle={{ marginTop: 20 }}
            viewMode={val => console.log(val)}
            portraitEndPoint={0.7}
            landscapeEndPoint={0.5}
            children={
                <View style={{ flex: 1 }}>
                    <Text>This is a children component</Text>
                </View>
            }
            parent={
                <Image 
                    style = {{ alignSelf: 'center', width: 25, height: 50, resizeMode: 'contain' }}
                    source = {{ uri: "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-21-256.png" }}
                />
            }
            first_action={() => console.log("First action pressed!")}
            first_child={<Image 
                style = {{ alignSelf: 'center', width: 36, height: 36, resizeMode: 'contain' }}
                source = {{ uri: "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-21-256.png" }}
            />}
            second_action={() => console.log("Second action pressed!")}
            second_child={<Image 
                style = {{ alignSelf: 'center', width: 36, height: 36, resizeMode: 'contain' }}
                source = {{ uri: "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-27-128.png" }}
            />}
            third_action={() => console.log("Third action pressed!")}
            third_child={<Image 
                style = {{ alignSelf: 'center', width: 36, height: 36, resizeMode: 'contain' }}
                source = {{ uri: "https://cdn3.iconfinder.com/data/icons/o-shaped-flag-1/128/O_shaped_asian_flag-16-256.png" }}
            />}
        />
    )

}

Props

Prop Type Required Default Description
parent component Yes The parent component
first_child component Yes The first child to show
first_action Action Yes The action perform after first child clicked
second_child component Yes The second child to show
second_action Action Yes The action perform after second child clicked
third_child component Yes The third child to show
first_action Action Yes The action perform after third child clicked
duration milliseconds No 500 The duration of animation
portraitEndPoint double No 0.7 The limit of the menu can reached in portrait mode
landscapeEndPoint double No 0.5 The limit of the menu can reached in landscape mode
viewMode Function No Callback function for screen mode changed
commonStyle style No Common style for both portrait and landscape mode
portraitStyle style No Style for portrait mode
landscapeStyle style No Style for landscape mode

MIT Licensed

Readme

Keywords

Package Sidebar

Install

npm i @zt-mobile/react-native-quick-controls

Weekly Downloads

0

Version

1.0.15

License

MIT

Unpacked Size

19.8 kB

Total Files

4

Last publish

Collaborators

  • khaiyuenzchwantech
  • kelvin6129