Itkitchen React Native UI Lib

Itkitchen React Native UI Lib

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

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
            activeOpacity={0.6}
            textStyle={{
                fontSize: 20
            }}
            containderStyle={{
                width: "50%",
                height: 50
            }}
            circleStyle={{
                width: "50%",
                height: 40,
                borderRadius: 20
            }}
            enabledCircleColor="#4DC861"
            disabledCircleColor="red"
            enabledText="On"
            disabledText="Off"
            enabledBackgroundColor="#ccc"
            disabledBackgroundColor="#ccc"
            onChangeState={switchState => setSwitchState(switchState)}
        />
    </View>
)

//...

Props
Name Description Default Type
activeOpacity opacity level on press 0.6 from 0 to 1
initPosition 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.
//...
import { Functions, UI } from 'itkitchen-react-native-ui-lib'

const { width, height } = Dimensions.get('window')

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width,
    },
})

const link = "https://i.ytimg.com/vi/1KQGMnEn9K0/maxresdefault.jpg"

const orders = [link, link, link, link, link, link, link, link, link, link, link, link, link, link, link]

const AnimatedHeader = props => {

    const renderHeader = (offset) => {
        let x = offset.interpolate({
            inputRange: [0, 150],
            outputRange: [0, (-width / 2) + 50],
            extrapolate: 'clamp'
        })
        return (
            <Animated.Text
                style={{
                    color: "#ffffff",
                    fontSize: 14,
                    fontWeight: "bold",
                    transform: [{ translateX: x }],
                    position: "absolute",
                }}
            >Cats List</Animated.Text>
        )
    }

    const renderItem = ({ item, index }) => (
        <View
            style={{
                width: (width / 2) - 15,
                height: 250,
                marginHorizontal: 5,
                marginTop: 15,
                borderRadius: 5,
                overflow: 'hidden'
            }}
        >
            <Image source={{ uri: item }} style={{ width: "100%", height: 250 }} resizeMode="cover" />
        </View>
    )

    return (
        <UI.AnimatedHeaderList
            data={orders}
            style={styles.container}
            renderHeader={renderHeader}
            renderItem={renderItem}
            headerMinHeight={55}
            numColumns={2}
            headerMaxHeight={200}
            headerComponentsMinOpacity={1}
            headerBackgroundColor="#0366d6"
            headerContainertStyle={{
                alignItems: "center",
                justifyContent: "center",
                width: width / 2,
                height: 150
            }}
        />
    )
}

Props
Name Description Default Type
data array of data [] array
style style of list {flex: 1, width: "100%"} style
contentContainerStyle style of list container {alignItems: "center"} style
headerContainertStyle style of header container {width: "100%", height: "100%"} style
headerBackgroundColor header background color '#ffffff' string
headerMaxHeight header max height 200 number
headerMinHeight header min height 55 number
headerComponentsMinOpacity header components can change opacity on animate. If you don't wont use opacity set it to 1 0 from 0 to 1
renderHeader callback to render header. Offset parameter is scroll offset value. Also offset is animated value, you can use interpolate to it (offset) => {return(Component)} func
renderItem callback to render item ({ item, index }) => {return(Component)} func
and all FlatList component props, without onScroll any
  • 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
            value={text}
            onChangeText={text => setText(text)}
            placeholder="Name"
            containerStyle={{ width: "95%" }}
        />
    </View>
)
//...

Props
Name Description Default Type
value value of TextInput component "" string
containerStyle style of text input container object style
focusedContainerStyle style of text input container when it focused object style
style style of TextInput component object style
focusedStyle style of TextInput component when it focused object style
IconComponent icon component that will render on left side of input null React Component
iconVisible the boolean prop that hide or show 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
maskType this props was deleted doesn't exist doesn't exist
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
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://thenypost.files.wordpress.com/2019/12/cat.jpg?quality=80&strip=all"
            nameString="Tit Hardwood"
            badge={999}
        />
        <Text>Tit Hardwood</Text>
    </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 object style
imageStyle style of the image object style
badgeStyle style of the badge object style
badgeTextStyle style of the badge object 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.

To use cards you need to install react-native-vector-icons

npm install react-native-vector-icons

OR

yarn add react-native-vector-icons
  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}
                        subTitle={item.subTitle}
                        imageUrl={item.imageUrl}
                        like
                        share
                        comment
                        favorite
                        iconsSize={23}
                    />
                ))
            }
        </ScrollView>
    )

Props
Name Description Default Type
title title of card "" string
subTitle subtitle of card "" string
imageUrl url to image "" string
like bool property to show or hide like icon false bool
comment bool property to show or hide comment icon false bool
favorite bool property to show or hide favorite icon false bool
share bool property to show or hide share icon false bool
liked bool property mark like icon false bool
commented bool property mark comment icon false bool
favorited bool property mark favorite icon false bool
shared bool property mark share icon false bool
iconsSize size of icons 22 number
onPress function that call when card pressed onPress={()=>{}} func
onLikePress function that call when like icon pressed onPress={()=>{}} func
onCommentPress function that call when comment icon pressed onPress={()=>{}} func
onFavoritePress function that call when favorite icon pressed onPress={()=>{}} func
onSharePress function that call when share icon pressed onPress={()=>{}} func
CustomFooter Custom component that will render on bottom of card instead of icons React Component
actionsColor color of icons when icon is not marked "#000000" string
altActionsColor color of icons when icon is marked "#ff0000" string
containerStyle style of component container object style
imageStyle style of the image object style
infoContainerStyle style of info container(title and subtitle) object style
titleStyle style of card title object style
subTitleStyle style of card subtitle object style
footerContainerStyle style of info container on bottom of card object style
  1. cardType - animated
    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="animated"
                        key={index}
                        title={item.title}
                        subTitle={item.subTitle}
                        imageUrl={item.imageUrl}
                        InfoComponent={
                            <Text>More info here</Text>
                        }
                    />
                ))
            }
        </ScrollView>
    )

Props
Name Description Default Type
title title of card "" string
subTitle subtitle of card "" string
imageUrl url to image "" string
onPress function that call when card pressed onPress={()=>{}} func
InfoComponent Custom component that will render more info opened React Component
containerStyle style of component container object style
titleStyle style of card title object style
subTitleStyle style of card subtitle object style
  1. 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}
                        subTitle={item.subTitle}
                        imageUrl={item.imageUrl}
                        like
                        share
                        comment
                        favorite
                        iconsSize={23}
                    />
                ))
            }
        </ScrollView>
    )

Props
Name Description Default Type
title title of card "" string
subTitle subtitle of card "" string
imageUrl url to image "" string
like bool property to show or hide like icon false bool
comment bool property to show or hide comment icon false bool
favorite bool property to show or hide favorite icon false bool
share bool property to show or hide share icon false bool
liked bool property mark like icon false bool
commented bool property mark comment icon false bool
favorited bool property mark favorite icon false bool
shared bool property mark share icon false bool
iconsSize size of icons 22 number
onPress function that call when card pressed onPress={()=>{}} func
onLikePress function that call when like icon pressed onPress={()=>{}} func
onCommentPress function that call when comment icon pressed onPress={()=>{}} func
onFavoritePress function that call when favorite icon pressed onPress={()=>{}} func
onSharePress function that call when share icon pressed onPress={()=>{}} func
CustomFooter Custom component that will render on bottom of card instead of icons React Component
actionsColor color of icons when icon is not marked "#000000" string
altActionsColor color of icons when icon is marked "#ff0000" string
containerStyle style of component container object style
imageStyle style of the image object style
infoContainerStyle style of info container(title and subtitle) object style
titleStyle style of card title object style
subTitleStyle style of card subtitle object style
footerContainerStyle style of info container on bottom of card object style

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

Download Details:

Author: blnaxblachbl

Source Code: https://github.com/blnaxblachbl/itkitchen-react-native-ui-lib

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.