React Native UI Kit

Overview

React Native UI Kit


This library consists of a small set of components that are highly flexible, extensively tested and commonly used when building any kind of react native app. Written in typescript.

   

Table of contents

Installing

Install dependencies

  yarn add @tarikfp/react-native-ui-kit

or

  npm install @tarikfp/react-native-ui-kit

Components

Button

A button is component that the user can press to trigger an action.

Properties

Inherits TouchableOpacity props and the following:

Prop Type Description
size string Size of the button. Can be one of the following: large, medium, small, xsmall
loading boolean Whether button is in loading state. Loading indicator will be shown next to the label in case of true.
labelStyle StyleProp Button label style.
label string Label of the button.
backgroundColor string Background color of the button.
startIcon IconProps Props of the icon which will be displayed start of the button.
endIcon IconProps Props of the icon which will be displayed end of the button.
loadingProps ActivityIndicatorProps Props of the loading indicator.

Usage

);">
import { Button } from "@tarikfp/react-native-ui-kit";

return (
  <Button
    size="xsmall"
    backgroundColor="royalblue"
    label="Start recording"
    startIcon={{
      name: "microphone",
      type: "FontAwesome",
      color: "white",
    }}
  />
);

Avatar

Avatars represent a user and can contain photos, icons, or even text.

Avatar Icon

Avatar with icon. This component uses react-native-vector-icons under the hood.

Prop Type Description
size number Size of the avatar. Default 32
backgroundColor string Background color of the avatar.
style StyleProp Style of the avatar.
name string Name of the icon.
type string Type of the icon. See available icon types
color string Color of the icon.
iconProps IconProps Props of the icon.

Avatar Icon usage

);">
import { Avatar } from "@tarikfp/react-native-ui-kit";

return (
  <Avatar.Icon color="dodgerblue" size={65} name="react" type="Fontisto" />
);

Avatar Image

Inheirts Image props and the following.

Prop Type Description
size number Size of the avatar. Default 32
source ImageSourcePropType The image source (either a remote URL or a local file resource).
backgroundColor string Background color of the avatar.
style StyleProp Style of the image wrapper.
imageStyle StyleProp Style of the image.

Avatar Image usage

);">
import { Avatar } from "@tarikfp/react-native-ui-kit";

return (
  <Avatar.Image
    size={65}
    source={{ uri: "https://reactnative.dev/img/logo-og.png" }}
  />
);

Avatar Text

Avatar with text component.

Prop Type Description
size number Size of the avatar. Default 32
label string Text to display on avatar.
backgroundColor string Background color of the avatar.
labelColor string Color of the avatar label.
style StyleProp Style of the avatar label wrapper.
labelStyle StyleProp Style of the label.

Avatar Text usage

;">
import { Avatar } from "@tarikfp/react-native-ui-kit";

return <Avatar.Text backgroundColor="darkorange" size={65} label="TP" />;

Header

Headers are the components that display information and actions for the current screen.

Properties

Inherits View props and the following:

Prop Type Description
height number Height of the header component. Defaults to 56.
hasShadow boolean Whether header has the shadow style applied or not. Defaults to false
backgroundColor string Background color of the header.
style StyleProp Style of the header.

Usage

);">
import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header>
    <Header.Title label="Home screen" />
    <Header.Image
      source={{
        uri: "https://reactnative.dev/img/logo-og.png",
      }}
    />
    <Header.Icon
      alignment="end"
      name="arrow-right"
      type="MaterialCommunityIcons"
    />
  </Header>
);

Header Icon

Header icon element. This component uses react-native-vector-icons under the hood.

Properties

Inherits IconProps and the following:

Prop Type Description
style StyleProp Style of the icon.
wrapperStyle StyleProp Style of the icon wrapper.
alignment string Alignment of the icon component. Can be one of the following: start, end

Header Icon usage

);">
import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header height={72}>
    <Header.Icon name="arrow-left" type="MaterialCommunityIcons" />
  </Header>
);

Header Image

Header image element.

Properties

Inherits Image props and the following:

Prop Type Description
style StyleProp Style of the image.

Header Image usage

);">
import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header>
    <Header.Image
      source={{
        uri: "https://reactnative.dev/img/logo-og.png",
      }}
    />
  </Header>
);

Header Title

Header title element.

Properties

Inherits Text props and the following:

Prop Type Description
title string Title text.
subtitle string Subtitle text.
subtitleStyle StyleProp Style of the subtitle text.
style StyleProp Style of the title text.
wrapperStyle StyleProp Style of the wrapper view.

Header Title usage

);">
import { Header } from "@tarikfp/react-native-ui-kit";

return (
  <Header>
    <Header.Title title="Home screen" />
  </Header>
);

Text Input

Text Input is a component for inputting text into the app via a keyboard.

Properties

Inherits TextInput props and the following:

Prop Type Description
isPassword boolean Whether the text input is password type. Toggling secureTextEntry with icon will be shown at the end of input in case of true
backgroundColor string Background color of text input.
inputStyle StyleProp Style of the input.
wrapperStyle StyleProp Style of the text input wrapper.
label string Label to display above input.
errorMessage string Error message text to display below input.
errorMessageIconProps IconProps Error message icon props.
startIcon IconProps Props of the icon which will be displayed start of the input.
endIcon IconProps Props of the icon which will be displayed end of the input.
renderStartElement () => React.ReactNode Callback function that returns React element(s) to be displayed on the start of the input. Overrides startIcon prop.
renderEndElement () => React.ReactNode Callback function that returns React element(s) to be displayed on the end of the input. Overrides endIcon prop.
renderInput () => React.ReactNode Callback function that returns React element(s) which will replace the default input.
endText string Text which will be displayed on the end of the input.
endTextStyle StyleProp End text style.
loading boolean Indicates whether input is in loading state. Loading indicator will be displayed at the end of the input.
loadingProps boolean Indicates whether input is in loading state. Loading indicator will be displayed at the end of the input.
renderLoading () => React.ReactNode Renders loading section of the input.
renderPasswordIcon () => React.ReactNode Renders custom password icon while overriding default one. isPassword must be set to true.
disabled boolean Whether all interactions are disabled in the input.
hideDefaultEndIcons boolean Hides default end icons for password and text type input. Defaults to false (Close icon for text and eye icon for password input)
height number Height of the input. Defaults to 56
borderRadius number Border radius of the input. Defaults to 8
borderColor string Border color of the input. Defaults to 8
labelStyle StyleProp Input text style.
errorColor string Color of the error which will be applied to the input border, error icon and text.
renderErrorSection () => React.ReactNode Callback function that returns React element(s) to be displayed on the error section of the input.

Usage

); // Display custom password icon return ( isSecureTextEntry ? ( ) : ( ) } /> ); // Display custom loading section return ( ( // inject computed container style Loading... )} /> ); // Display custom start element return ( ( )} /> );">
import { TextInput } from "@tarikfp/react-native-ui-kit";

return (
  <TextInput
    wrapperStyle={{ marginBottom: 16 }}
    label="E-Mail"
    labelStyle={{ color: "#FFFFFF" }}
    endText="Special one"
    endTextStyle={{ color: "grey" }}
    placeholder="Type your email"
    placeholderTextColor="grey"
    startIcon={{ type: "MaterialCommunityIcons", name: "email" }}
    value={email}
    onChangeText={setEmail}
  />
);

// Display custom password icon

return (
  <TextInput
    isPassword
    renderPasswordIcon={({ isSecureTextEntry, toggleSecureTextEntry }) =>
      isSecureTextEntry ? (
        <Icon onPress={toggleSecureTextEntry} name="eye" type="Feather" />
      ) : (
        <Icon onPress={toggleSecureTextEntry} name="eye-off" type="Feather" />
      )
    }
  />
);

// Display custom loading section

return (
  <TextInput
    loading
    renderLoading={(containerStyle) => (
      // inject computed container style
      <View style={[containerStyle, myStyle]}>
        <Text>Loading...</Text>
      </View>
    )}
  />
);

// Display custom start element

return (
  <TextInput
    renderStartElement={() => (
      <View>
        <Image
          style={{ width: 30, height: 30 }}
          source={{
            uri: "customImageUrl",
          }}
        />
      </View>
    )}
  />
);

List Item

List items are used to display rows of information, they are extremely flexible and can contain almost anything.

Properties

Inherits TouchableOpacity props and the following:

Prop Type Description
height number Height of the list item component. Defaults to 56.
hasShadow boolean Whether list item has the shadow style applied or not. Defaults to false
backgroundColor string Background color of the list item.
style StyleProp Style of the list item.

Usage

);">
import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem style={{ marginTop: 50 }} hasShadow height={150}>
    <ListItem.Title
      title="React Native"
      style={{ fontSize: 32, lineHeight: 55, fontWeight: "500" }}
      subtitle="Flexible list item..."
      subtitleStyle={{ fontWeight: "300", color: "grey" }}
    />
    <ListItem.Button
      alignment="end"
      backgroundColor="royalblue"
      size="xsmall"
      label="List item button"
    />
  </ListItem>
);

List Item Icon

List Item icon element. This component uses react-native-vector-icons under the hood.

Properties

Inherits IconProps and the following:

Prop Type Description
style StyleProp Style of the icon.
wrapperStyle StyleProp Style of the icon wrapper.
alignment string Alignment of the icon component. Can be one of the following: start, end

List Item Icon usage

);">
import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem>
    <ListItem.Icon
      name="lightbulb"
      type="MaterialCommunityIcons"
      color="orange"
    />
  </ListItem>
);

List Item Image

List Item image element.

Properties

Inherits Image props and the following:

Prop Type Description
style StyleProp Style of the image.

List Item Image usage

);">
import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem>
    <ListItem.Image
      style={{ width: 50, height: 50 }}
      source={{
        uri: "https://reactnative.dev/img/logo-og.png",
      }}
    />
  </ListItem>
);

List Item Title

List Item title element.

Properties

Inherits Text props and the following:

Prop Type Description
title string Title text.
subtitle string Subtitle text.
subtitleStyle StyleProp Style of the subtitle text.
style StyleProp Style of the title text.
wrapperStyle StyleProp Style of the wrapper view.

List Item Title usage

);">
import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem>
    <ListItem.Title
      title="Find new ideas!"
      subtitle="Subscribe here..."
      subtitleStyle={{ fontWeight: "300", color: "grey" }}
    />
  </ListItem>
);

List Item Button

List Item button element.

Properties

Inherits Button props and the following:

Prop Type Description
wrapperStyle StyleProp Style of the button wrapper.
alignment string Alignment of the icon component. Can be one of the following: start, end

List Item Button usage

);">
import { ListItem } from "@tarikfp/react-native-ui-kit";

return (
  <ListItem hasShadow height={150}>
    <ListItem.Button
      alignment="end"
      backgroundColor="royalblue"
      size="xsmall"
      label="List item button"
    />
  </ListItem>
);

Contributing

The main purpose of this library is to provide reusable, bug-free, and flexible components along with documentation. Contributors are always highly appreciated to keep this library maintained and enhance it more.

License

MIT

You might also like...
react-native-splashscreen ★358 - A splash screen for react-native
react-native-splashscreen ★358 - A splash screen for react-native

React Native SplashScreen (remobile) A splashscreen for react-native, hide when application loaded Installation npm install @remobile/react-native-spl

Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.
Beautifully crafted off canvas menu components for react native applications. Built on top of react-native's Animated library.

react-native-off-canvas-menu Beautifully crafted off canvas menu components for react native applications. Features - Gesture Support Orientation Comp

A QR Code generator for React Native based on react-native-svg and node-qrcode.
A QR Code generator for React Native based on react-native-svg and node-qrcode.

react-native-qrcode-svg A QR Code generator for React Native based on react-native-svg and javascript-qrcode. Discussion: https://discord.gg/RvFM97v F

react-native-egg make your react native app infinitely more fun !!

react-native-egg react-native-egg make your react native app infinitely more fun !! Implementation simple gestures detection achieve trigger easter eg

React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

react-native-wheel-picker ★190 - React native cross platform picker.
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

react-native-cache-image ★158 - A cache-image for react-native

React Native CacheImage (remobile) A cache-image for react-native When use web image, this module will find the web image's url corresponding image f

react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

react-native-page-swiper ★83 - Page Swiper component for React Native.

react-native-page-swiper Page Swiper component for React Native. Getting Started Installation Basic Usage Properties Examples Development Installation

Comments
  • build(deps): bump react-native from 0.63.4 to 0.64.1 in /example

    build(deps): bump react-native from 0.63.4 to 0.64.1 in /example

    Bumps react-native from 0.63.4 to 0.64.1.

    Release notes

    Sourced from react-native's releases.

    v0.64.1

    This patch release is specifically targetted towards fixing iOS build problems in Xcode 12.5. If it doesn't help, please refer to this issue.

    Aside from bumping your version from 0.64.0 to 0.64.1, please check your podfile.lock and make sure that Flipper is on 0.75 or higher, and Flipper-Folly is 2.5.3 or higher; if not, add this line to your podfile (or modify it if you already had it):

    use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
    

    After which, do all the classic necessary cleans (node_modules, caches, pod folders, etc)(react-native-clean-project is your ally) then do yarn install and a pod install --repo-update (if pod install fails on an error about a Flipper package, just remove the relevant lines from the podfile.lock and run the pod install again).

    The only other commit picked & released along the Xcode 12.5 fixes is:

    • Update validateBaseUrl to use latest regex (commit) which fixes CVE-2020-1920, GHSL-2020-293.

    You can participate in the conversation on the status of this release at this issue.


    To help you upgrade to this version, you can use the upgrade helper ⚛️


    You can find the whole changelog history over at react-native-releases.

    v0.64.0

    0.64 stable is here 🎉

    Thanks to everyone who contributed and helped to get this together, everyone worked really hard and we hope you are as excited as we are 🤗

    Some of the most important highlights of this version:

    • Hermes opt-in on iOS
    • Inline Requires enabled by default
    • React 17

    Among many others - please refer to the blog post for more details.


    You can participate in the conversation on the status of this release at this issue.


    You can upgrade to this version using the upgrade helper webtool ⚛️ And if you are having trouble, please refer to the new Upgrade Support repository by our awesome community.


    ... (truncated)

    Changelog

    Sourced from react-native's changelog.

    v0.64.1

    Fixed

    iOS specific

    Security

    v0.64.0

    Breaking

    Android specific

    iOS specific

    Deprecated

    Android specific

    • Deprecated method UIManagerModule.getUIImplementation. This method will not be part of the new architecture of React Native. (fe79abb32c by @​mdvacca)

    Added

    ... (truncated)

    Commits
    • 787567a [0.64.1] Bump version numbers
    • cf8a364 [local] change post-install to patch RTC-Folly
    • 1c4ac48 [local] yarn lock update (?)
    • 76f45d3 [local] update RNTester files for 0.64
    • 3912fef Update validateBaseUrl to use latest regex
    • ace025d [0.64.0] Bump version numbers
    • 728d55a Fixing the git attrs for all the people and all the files and all future 🙌
    • 8a6ac1f chore: Update React.podspec to require cocoapods >= 1.10.1
    • 138fdbc fix: restore refresh control fix
    • 7f3f80f Fix RefreshControl layout when removed from window (#31024)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): bump hermes-engine and react-native in /example

    build(deps): bump hermes-engine and react-native in /example

    Bumps hermes-engine and react-native. These dependencies needed to be updated together. Updates hermes-engine from 0.5.1 to 0.11.0

    Commits
    • 2040453 Bump versions for 0.11.0 cut
    • 6c53047 Run Hermes CMake from cargo
    • 67fe974 Bump nanoid from 3.1.22 to 3.2.0 in /website (#666)
    • 10d4945 Handle type params in methods
    • bd64b09 Avoid parens around spread arguments
    • deabbfd Use proper quotes in string literal type annotation
    • ae61d74 Fix extra parens in property assignment
    • 1ba8ef6 Store raw values for string literals as JSX attributes
    • 46faa15 Enable some syscalls to resume after SIGPROF
    • 8bebc9b fix handling of imports
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by lunaleaps, a new releaser for hermes-engine since your current version.


    Updates react-native from 0.63.4 to 0.69.4

    Release notes

    Sourced from react-native's releases.

    0.69.4

    Changed

    Android specific


    You can participate in the conversation on the status of this release in this discussion


    To help you upgrade to this version, you can use the upgrade helper ⚛️


    You can find the whole changelog history in the changelog.md file.

    0.69.3

    Fixed

    iOS specific


    You can participate in the conversation on the status of this release in this discussion


    To help you upgrade to this version, you can use the upgrade helper ⚛️


    You can find the whole changelog history in the changelog.md file.

    0.69.2

    Changed

    iOS specific

    ... (truncated)

    Changelog

    Sourced from react-native's changelog.

    v0.69.4

    Changed

    Android specific

    v0.69.3

    Fixed

    iOS specific

    v0.69.2

    Changed

    iOS specific

    v0.69.1

    Changed

    iOS specific

    Fixed

    • Use monotonic clock for performance.now() (114d31feee)

    iOS specific

    v0.69.0

    ... (truncated)

    Commits
    • 4bdec97 [0.69.4] Bump version numbers
    • 8524177 Added additional builder method receiving arguments for using jsc or hermes t...
    • df31a1e Update script from prepublish (deprecated) to prepack (#34198)
    • 66c68c3 Upgrade RN CLI to v8.0.4 (#34272)
    • 6fe8367 [0.69.3] Bump version numbers
    • b9e9b53 Merge pull request #34214 from Kudo/fix-34102
    • fa2acc3 Fix React-bridging header not found for third party modules
    • 30d1e20 Merge pull request #34228 from facebook/fix/build_hermes_against_stable
    • a2d6f5a fix: build hermes from source on PR against stable
    • 75eb6e7 [0.69.2] Bump version numbers
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by fb, a new releaser for react-native since your current version.


    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
📊React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)

??React Native Chart Kit: Line Chart, Bezier Line Chart, Progress Ring, Bar chart, Pie chart, Contribution graph (heatmap)

null 2.3k Dec 5, 2022
React Native UI Kit

This library consists of a small set of components that are highly flexible, extensively tested and commonly used when building any kind of react native app. Written in typescript.

Tarık 12 Sep 7, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Dec 2, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 13 Nov 26, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 415 Oct 9, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 6.5k Dec 2, 2022
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Osvaldo Kalvaitir Filho 25 Nov 8, 2022