react-native-quick-controls

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