itkitchen-react-native-ui-lib v1.4.5

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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

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

• 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

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>
)