itkitchen-react-native-ui-lib

itkitchen-react-native-ui-lib is a framework that contains a set of UI components and functions.

Setup

To install open your project in command line and run:

npm install itkitchen-react-native-ui-lib

OR

yarn add itkitchen-react-native-ui-lib

Thats it!

Usage

For use you can import Functions and UI:

import { Functions, UI } from 'itkitchen-react-native-ui-lib'

UI

• Switch - is UI component of switch:

import { Functions, UI } from 'itkitchen-react-native-ui-lib'

const [switchState, setSwitchState] = useState(false)

//...

return (
    <View style={styles.container}>
        <UI.Switch />
        <UI.Switch
            textStyle={{
                fontSize: 20
            }}
            containderStyle={{
                width: "50%",
                height: 50,
                marginTop: 15
            }}
            circleStyle={{
                width: "50%",
                height: 40,
                borderRadius: 20
            }}
            enabledCircleColor="#4DC861"
            disabledCircleColor="red"
            enabledText="On"
            disabledText="Off"
            enabledBackgroundColor="#ccc"
            disabledBackgroundColor="#ccc"
            onChangeState={switchState => setSwitchState(switchState)}
            initValue={true}
        />
    </View>
)

//...

Props

Name | Description | Default | Type ------|-------------|----------|----------- activeOpacity | opacity level on press | 0.6 | from 0 to 1 initValue | initial position | false | bool textStyle | switch text style | undefined | style containderStyle | switch container style | undefined | style circleStyle | switch circle style | undefined | style enabledCircleColor | color for circle of switch when it is on | '#4DC861' | string disabledCircleColor | color for circle of switch when it is off | 'red' | string enabledText | text of switch when it is on | 'On' | string disabledText | text of switch when it is off | 'Off' | string enabledBackgroundColor | switch background color when it is on | '#ccc' | string disabledBackgroundColor | switch background color when it is off | '#ccc' | string onChangeState | callback when switch is clicked| (value) => {callback(value)} | func

• AnimatedHeaderList - is UI component with animated header. This component based on FlatList and support all props of it. //Removed. Maybe in the next update we will refactor and refund it.

• TextInput - is UI component with animated lable of text input.

//...
import { Functions, UI } from 'itkitchen-react-native-ui-lib'
//...
const [text, setText] = useState("")

return (
    <View style={styles.container}>
        <UI.TextInput
            placeholder="What is not a programming language"
            focusedPlaceholderTextColor="red"
            focusedContainerStyle={{
                borderColor: 'red',
                borderWidth: 1
            }}
            listData={[
                { value: 'js', label: 'JavaScript' },
                { value: 'php', label: 'PHP' },
                { value: 'python', label: 'Python' },
                { value: 'c', label: 'C++' },
                { value: 'ruby', label: 'Ruby' },
                { value: 'html', label: 'HTML' },
                { value: 'dart', label: 'Dart' },
            ]}
            listProps={{
                scrollView: {
                    style: {
                        width: 200
                    }
                },
                emptyText: 'Nothing is here'
            }}
        />
    </View>
)
//...

Props

Name | Description | Default | Type ------|-------------|----------|----------- value | value of TextInput component | "" | string containerStyle | style of text input container | {} | object focusedContainerStyle | style of text input container when it focused | {} | object style | style of TextInput component | {} | object focusedStyle | style of TextInput component when it focused | {} | object IconComponent | icon component that will render on right side of input | null | React Component iconVisible | the boolean prop that hide or show right icon component | false | bool LeftIconComponent | icon component that will render on left side of input | null | React Component leftIconVisible | the boolean prop that hide or show left icon component | false | bool disableAnimation | the boolean prop that disable animation | false | bool focusedPlaceholderTextColor | if lable color shuld change on focus, pass your color to this props | same with placeholderTextColor | string listData | array of object({value: Any, label: String}) | [] | array listProps | object of list props {"containerStyle": Object, style of list container. "scrollViewProps": ScrollViewProps, react-native ScrollView properties. "itemStyle": Object, list item style, "itemTextStyle": Object, list item text style, "emptyContainerStyle": Object, container style if list of suggestions is empty, "emptyTextStyle": Object, text style when list of suggestions is empty, "emptyText": Object, style of text when list of suggestions is empty } | {} | object onListItemSelect | call back function when list item is pressed | () => {} | function and all TextInput component props | | | any

• Button - is UI component of button.

//...
import { Functions, UI } from 'itkitchen-react-native-ui-lib'
//...
return (
    <View style={styles.container}>
        <UI.Button 
            text="Button"
            style={{
                width: '95%',
                height: 40,
            }}
        />
    </View>
)

Props

Name | Description | Default | Type ------|-------------|----------|----------- style | style of Button component | object | style textStyle | style of button text | object | style onPress | function that call when button pressed | onPress={()=>{}} | func activeOpacity | determines what the opacity of the wrapped view should be when touch is active. From 0 to 1 | 0.6 | float text | text that will display on button | "ItKitchenButton" | string loading | boolean props that show or hide spinner, also if loading true function "onPress" will not be called | false | bool loadingColor | color of loading spinner | "#ffffff" | string

• RadioButton - is UI component of radio button.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'
//...
const [value, setValue] = useState(false)
const [value1, setValue1] = useState(false)
//...
return (
    <View style={styles.container}>
        <UI.RadioButton
            value={value}
            title="Title"
            onPress={() => setValue(!value)}
            activeTintColor="red"
            inactiveTontColor="black"
        />
        <UI.RadioButton
            value={value1}
            title="Title 1"
            onPress={() => setValue1(!value1)}
            activeTintColor="red"
            inactiveTontColor="black"
        />
    </View>
)

Props

Name | Description | Default | Type ------|-------------|----------|----------- containerStyle | style of the component container | object | style radioButtonStyle | style of the outer circle | object | style circleStyle | style of the inner circle | object | style value | value of button, if true button is checked | false | bool onPress | function that call when button pressed | onPress={()=>{}} | func activeOpacity | determines what the opacity of the wrapped view should be when touch is active. From 0 to 1 | 0.6 | float title | text that will display on right side of button | "" | string activeTintColor | color when button is checked | "#494043" | string inactiveTontColor | color when button is unchecked | "#494043" | string

• DropDown - is UI component of drop down list.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'
//...
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width,
        alignItems: "center",
        justifyContent: "center"
    },
    dropdown: {
        width: "80%",
        borderRadius: 5,
        borderColor: "grey",
        borderWidth: 1,
        paddingHorizontal: 5
    }
})
//...
const [state, setState] = useState("")

const stringData = ["value 1", "value 2"]
const odjData = [{value: 1, label: "value 1"}, {value: 2, label: "value 2"}]

return (
    <View style={styles.container}>
        <UI.DropDown
            data={stringData}
            value={state}
            placeholder="Select value"
            onDataChange={value => setState(value)}
            style={styles.dropdown}
        />
    </View>
)

Props

Name | Description | Default | Type ------|-------------|----------|----------- data | array of strings that will display on drop down list | [] | array value | value that will display on button | "" | string onDataChange | function that call when selected new value | onDataChange={value => {}} | func style | style of the component container | object | style textStyle | style of the component text | object | style placeholderTextStyle | style of the component placeholder | object | style menuStyle | style of the menu container | object | style itemStyle | style of the menu item container | object | style itemTextStyle | style of the menu item text | object | style placeholder | value that will display when "value" property is empty | "" | string

• Avatar - is UI component of image for lists to profile screens.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'
//...
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width,
        alignItems: "center",
        justifyContent: "center"
    }
})
//...

return (
    <View style={styles.container}>
        <UI.Avatar
            imageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSsb3dnwW7TWK8zRGaCQ_ThqeLRWTZKXsWAL5z6rI_9UAwM0NqH"
            nameString="Tit Hardwood"
            badge={100}
            style={{ marginBottom: 15 }}
        />
        <UI.Avatar
            nameString="Tit Hardwood"
            badge={5}
        />
    </View>
)

Props

Name | Description | Default | Type ------|-------------|----------|----------- imageUrl | url to image | "" | String nameString | string of user name or description | "" | string onPress | function that call when avatar pressed | onPress={()=>{}} | func badge | used if you need to render badge on avatar | 0 | number style | style of the component container | {} | style imageStyle | style of the image | {} | style badgeStyle | style of the badge | {} | style badgeTextStyle | style of the badge | {} | style letterStyle | style of letters of nameString when imageUrl is empty | {} | style

• Badge - is UI component used to render a numerical value.

    import { Functions, UI } from 'itkitchen-react-native-ui-lib'
    //...
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width,
            alignItems: "center",
            justifyContent: "center"
        }
    })
    //...
    return (
        <View style={styles.container}>
            <UI.Badge badge={1} />
            <UI.Badge badge={12} />
            <UI.Badge badge={123} />
        </View>
    )

Props

Name | Description | Default | Type ------|-------------|----------|----------- badge | used if you need to render badge on avatar | 0 | number style | style of the component container | object | style textStyle | style of the badge value | object | style

• Card - is UI component used to render some information.

1. cardType - default

    import { Functions, UI } from 'itkitchen-react-native-ui-lib'
    //...
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width
        }
    })
    //...
    const arr = new Array(10).fill({
        imageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSsb3dnwW7TWK8zRGaCQ_ThqeLRWTZKXsWAL5z6rI_9UAwM0NqH',
        title: "Cat",
        subTitle: "Sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping"
    })
    //...
    return (
        <ScrollView
            style={styles.container}
            contentContainerStyle={{ alignItems: 'center' }}
        >
            {
                arr.map((item, index) => (
                    <UI.Card
                        key={index}
                        title={item.title}
                        description={item.description}
                        imageUrl={item.imageUrl}
                        containerStyle={{ marginBottom: 15 }}
                    />
                ))
            }
        </ScrollView>
    )

Props

Name | Description | Default | Type ------|-------------|----------|----------- title | title of card | "" | string description | subtitle of card | "" | string imageUrl | url to image | "" | string onPress | function that call when card pressed | onPress={()=>{}} | func titleNumberOfLines | number of title lines. React-Native Text component property | 3 | number descriptionNumberOfLines | number of description lines. React-Native Text component property | 3 | number Footer | Component that will render on bottom of card | null | React-Native Component containerStyle | style of component container | {} | style imageStyle | style of the image | {} | style imageContainerStyle | style of image container | {} | style infoContainerStyle | style of info container(title and subtitle) | {} | style titleStyle | style of card title | {} | style descriptionStyle | style of card subtitle | {} | style loadingColor | color of ActivityIndicator while image loading | "#000" | string loadingSize | size of ActivityIndicator while image loading | 'small' | 'small' or 'large' imageProps | Image component props | | | any

2. cardType - animated //Removed.

3. cardType - background

    import { Functions, UI } from 'itkitchen-react-native-ui-lib'
    //...
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            width,
            alignItems: "center",
            justifyContent: "center"
        }
    })
    //...
    const arr = new Array(10).fill({
        imageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSsb3dnwW7TWK8zRGaCQ_ThqeLRWTZKXsWAL5z6rI_9UAwM0NqH',
        title: "Cat",
        subTitle: "Sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping"
    })
    //...
    return (
        <ScrollView
            style={styles.container}
            contentContainerStyle={{ alignItems: 'center' }}
        >
            {
                arr.map((item, index) => (
                    <UI.Card
                        cardType="background"
                        key={index}
                        title={item.title}
                        description={item.subTitle}
                        imageUrl={item.imageUrl}
                        containerStyle={{ marginBottom: 15 }}
                    />
                ))
            }
        </ScrollView>
    )

Props

Name | Description | Default | Type ------|-------------|----------|----------- title | title of card | "" | string description | subtitle of card | "" | string imageUrl | url to image | "" | string onPress | function that call when card pressed | onPress={()=>{}} | func titleNumberOfLines | number of title lines. React-Native Text component property | 3 | number descriptionNumberOfLines | number of description lines. React-Native Text component property | 3 | number Footer | Component that will render on bottom of card | null | React-Native Component containerStyle | style of component container | {} | style imageStyle | style of the image | {} | style maskStyle | style of mask view container | { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0,0,0,0.4)" } | style infoContainerStyle | style of info container(title and subtitle) | {} | style titleStyle | style of card title | {} | style descriptionStyle | style of card subtitle | {} | style imageBackgroundProps | ImageBackground component props | | | any

• FlatList - is modified React-Native FlatList component.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'

const { width } = Dimensions.get("window")

const arr = new Array(10).fill({
    imageUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSsb3dnwW7TWK8zRGaCQ_ThqeLRWTZKXsWAL5z6rI_9UAwM0NqH',
    title: "Cat",
    description: "Sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping sleeping"
})
const loading = true

//...

return(
    <UI.FlatList
        data={arr}
        renderItem={({ item }) => (
            <View style={{ width, paddingHorizontal: 15, paddingTop: 15 }}>
                <UI.Card
                    title={item.title}
                    description={item.description}
                    imageUrl={item.imageUrl}
                />
            </View>
        )}
        loading={loading}
        useRefreshControl={false}
        LoadinComponent={
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <ActivityIndicator animating size={"large"} />
            </View>
        }
    />
)

Props

Name | Description | Default | Type ------|-------------|----------|----------- loading | if this property is true refresh controll or LoadingConponent is showing up | false | bool onRefresh | RefreshControl onRefresh property | () => {} | function LoadinComponent | component that will be showing up instead of ListEmptyComponent if loading true | null | React-Native component useRefreshControl | if true used RefreshControll component to FlatList | true | bool emptyComponenText | Default ListEmptyComponent text | "There is nothing here" | string and all FlatList component props | | | any

Functions

• normalize - is a function which normalizes the font size of the text relative to the screen size.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'

//...

return (
    <View style={styles.container}>
        <Text style={{ fontSize: Functions.normalize(14), color: "#000000", marginBottom: 15 }}>Some text</Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

• wordsFromUpperCase - is a regex function that replace words first lower case character to upper.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'

//...

return (
    <View style={styles.container}>
        <Text style={{ fontSize: 14, color: "#000000" }}>{"some text without upper case"}</Text>
        <Text style={{ fontSize: 14, color: "#000000" }}>{Functions.wordsFromUpperCase("some text without upper case")}</Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});

• emailValid - is a regex function that return true if email is valid and return false if is not.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'

//...

const [email, setEmail] = useState("")

const checkEmail = () => {
    let check = Functions.emailValid(email)
    alert(check)
}

return (
    <View style={styles.container}>
        <UI.TextInput
            value={email}
            onChangeText={email => setEmail(email)}
            placeholder="Введите ваше имя"
            style={styles.textInput}
        />
        <TouchableOpacity onPress={checkEmail} style={styles.buttonContainer}>
            <Text style={{ color: "#ffffff" }}>Check email</Text>
        </TouchableOpacity>
    </View>
)

//...

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    buttonContainer: {
        width: "90%",
        height: 50,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "blue",
        borderRadius: 24,
    },
    textInput: {
        height: 45,
        width: "90%",
        borderRadius: 24,
        backgroundColor: '#e8e8e8',
        justifyContent: "center",
        paddingHorizontal: 15,
        marginBottom: 15
    }
});

• hexToRgba - is a function that can convert color hex value to rgb or rgba.

import { Functions, UI } from 'itkitchen-react-native-ui-lib'
//...
const color = "#c260b5"
const alpha = 0.2
return (
    <View style={styles.container}>
        <Text>{color}</Text>
        <Text>{Functions.hexToRgba(color)}</Text>
        <Text>{Functions.hexToRgba(color, alpha)}</Text>
    </View>
)