The react-native UI Kit you've been looking for.

Last update: Jun 16, 2022

React-Virgin

Travis GitHub last commit GitHub issues GitHub forks GitHub stars GitHub license Twitter

The React-Native UI Kit you've been looking for

Made with lots of ❤️

What is React-Virgin?

  • Boiler plate UI kit for your React-Native projects
  • Get started quickly
  • A beautiful React-Native UI kit

What is inside React-Virgin?

  • Basic Boilerplate including react-navigation 💥
  • Basic components
  • Horizontal List
  • Vertical list
  • Buttons
  • Header
  • Gridview
  • Chat bubble
  • Loader

Preview

Android iOS
android ios

Installation

React-Virgin requires Node.js v4+ to run.

Clone the repo

$ cd Trixie-UI-kit
$ cd TrixieUiKit
$ npm install
$ react-native run-ios

Linting

$ yarn lint

We also have prettier support. Run the following after you write code to apply the prettier config.

$ yarn format

Development

We would love if you can contribute to make this project better. Here's how you can do it:

  • Fork the project.
  • Commit changes or bugfixes to your repo.
  • Submit a pull request
  • Sit back and relax while our maintainers checkout your changes and approve them!

Docs

Basic documentation is available on - https://trixieapp.github.io/react-virgin/

Todos

  • Complete documentation
  • Drawer menu
  • Card layout
  • Buttons with icons
  • All form components

License

MIT

Free Software, Hell Yeah! Buy Me A Coffee

GitHub

https://github.com/Trixieapp/react-virgin
Comments
  • 1. What's the Android ETA?

    Hi guys,

    first of all very nice work :)

    and thanks for making this a nice intuitive way to find components in RN.

    I am just wondering about when you'll release the Android version or support for this?

    Thanks again

    Reviewed by x5engine at 2017-10-28 16:18
  • 2. Add index file full of export components

    You can nicely import it from other places like this.

    // from
    import ButtonBordered from '../components/buttonBordered';
    import ButtonPrimary from '../components/buttonPrimary';	
    import Pills from '../components/pills';
    import PillPrimary from '../components/pillPrimary';
    import ChatBubble from '../components/chatBubble';
    import GridItem from '../components/gridItem';
    import BottomNav from '../components/bottomNav';
    import InputField from '../components/input';
    
    // to
    import { 
      BottomNav, 
      ButtonBordered, 
      ButtonPrimary, 
      ChatBubble, 
      GridItem, 
      InputField, 
      PillPrimary, 
      Pills 
    } from '../components';
    
    Reviewed by nattatorn-dev at 2017-10-16 17:52
  • 3. Documentation is inconsistent regarding Android support.

    The readme states "React-Virgin is coming soon for Android" and under TODOs it has "For Android". However, it also has a preview for Android, and the latest commit appears to have added Android support.

    Reviewed by TomMahle at 2017-11-16 15:00
  • 4. Bump eslint from 4.9.0 to 4.18.2 in /TrixieUiKit

    Bumps eslint from 4.9.0 to 4.18.2.

    Release notes

    Sourced from eslint's releases.

    v4.18.2

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    • 4f898c7 Build: Fix JSDoc syntax errors (#9813) (Matija Marohnić)
    • 13bcf3c Fix: Removing curly quotes in no-eq-null report message (#9852) (Kevin Partington)
    • b96fb31 Docs: configuration hierarchy for CLIEngine options (fixes #9526) (#9855) (PiIsFour)
    • 8ccbdda Docs: Clarify that -c configs merge with .eslintrc.* (fixes #9535) (#9847) (Kevin Partington)
    • 978574f Docs: Fix examples for no-useless-escape (#9853) (Toru Kobayashi)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v4.18.2 - March 2, 2018

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1 - February 20, 2018

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0 - February 16, 2018

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0 - February 2, 2018

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0 - January 19, 2018

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    ... (truncated)
    Commits

    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 ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major 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.

    Reviewed by dependabot[bot] at 2020-01-10 12:36
  • 5. Not able to load the icons in tab navigator

    Hi there i am using you custom tab navigator, I want to use Icon in tabBarIcon instead of using image tag but when i try to load the icon it's not working it's show blank.

    Here is my code

      Component,
    } from 'react';
    /* App routes define here */
    
    import { StackNavigator, TabNavigator } from 'react-navigation'
    import VerifyMobileNumber from '../containers/VerifyUser/VerifyMobileNumber'
    import VerifyMobileOtp from '../containers/VerifyUser/VerifyMobileOtp'
    import ProfilePage from '../containers/ProfileScreen/ProfilePage'
    import WalkThrough from '../containers/WalkThrough/Screen'
    
    /*Tab navigator pages*/
    
    import UserPage from '../components/userPage'
    import InviteFriend from '../containers/ProfileScreen/InviteFriend'
    import UserPagew from '../components/userPage'
    import InviteFriendw from '../containers/ProfileScreen/InviteFriend'
    import FeatherIcon from 'react-native-vector-icons/MaterialCommunityIcons';
    import componentStyle from '../components/style/component';
    import BottomNav  from '../components/bottomNav'
    
    
    const tabList = [
      {
        text: ' UserPage ',
        redirectLink: 'UserPage',
        id: 'UserPage',
        icon: 'account-circle',
        selectionIcon: 'account-circle',
      },
      {
        text: ' InviteFriend ',
        redirectLink: 'InviteFriend',
        id: 'InviteFriend',
        icon: 'account-card-detail',
        selectionIcon: 'account-card-detail',
      },
      {
        text: ' UserPagew ',
        redirectLink: 'UserPagew',
        id: 'UserPagew',
        icon: 'calendar-check',
        selectionIcon: 'calendar-check',
      },
      {
        text: ' InviteFriendw ',
        redirectLink: 'InviteFriendw',
        id: 'InviteFriendw',
        icon: 'calendar-check',
        selectionIcon: 'calendar-check',
      },
    ];
    
    const UserPages = StackNavigator({
      UserPage: {
        screen: UserPage,
      },
    });
    
    const InviteFriends = StackNavigator({
      InviteFriend: {
        screen: InviteFriend,
      },
    });
    
    const UserPagews = StackNavigator({
      UserPagew: {
        screen: UserPagew,
      },
    });
    
    const InviteFriendws = StackNavigator({
      InviteFriendw: {
        screen: InviteFriendw,
      },
    });
    
    
    const tabBarConfiguration = {
      tabBarOptions: {
        style: {
          backgroundColor: 'white',
          borderTopWidth: 0,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 3 },
          shadowOpacity: 0.2,
          shadowRadius: 4,
          elevation: 1,
        },
      },
      showIcon:true,
      tabBarPosition: 'top',
      tabBarComponent: BottomNav
    };
    
    const CustomTab = TabNavigator({
      home: {
        screen: UserPage,
        navigationOptions: {
          tabBarLabel: tabList[0].text,
          tabBarIcon: ({ focused }) => (
            <FeatherIcon
              style={componentStyle.footerIcons}
              source={focused ? tabList[0].selectionIcon : tabList[0].icon}
            />
          )
        }
      },
      menu2: {
        screen: InviteFriend,
        navigationOptions: {
          tabBarLabel: tabList[1].text,
          tabBarIcon: ({ focused }) => (
            <FeatherIcon
              style={componentStyle.footerIcons}
              source={focused ? tabList[1].selectionIcon : tabList[1].icon}
            />
          )
        }
      },
      menu3: {
        screen: UserPagew,
        navigationOptions: {
          tabBarLabel: tabList[2].text,
          tabBarIcon: ({ focused }) => (
            <FeatherIcon
              style={componentStyle.footerIcons}
              source={focused ? tabList[2].selectionIcon : tabList[2].icon}
            />
          )
        }
      },
      menu4: {
        screen: InviteFriendw,
        navigationOptions: {
          tabBarLabel: tabList[3].text,
          tabBarIcon: ({ focused, tintColor }) => (
            <FeatherIcon
              style={componentStyle.footerIcons}
              source={focused ? tabList[3].selectionIcon : tabList[3].icon}
            />
          )
        }
      }
    }, tabBarConfiguration);
    
    
    
    export const MobileVerification = StackNavigator({
    	CustomTab: { screen : CustomTab }
    },{
    	headerMode: 'none'
    },);
    
    
    
    Reviewed by Vinay012 at 2017-11-07 09:29
This project has been deprecated, move to https://github.com/beefe/react-native-picker
This project has been deprecated, move to https://github.com/beefe/react-native-picker

This project has been deprecated, move to https://github.com/beefe/react-native-picker react-native-picker-android PickerAndroid has PickerIOS interfa

Jun 25, 2021
:package: Android Native Kit for React-Native
:package: Android Native Kit for React-Native

React Native Android Kit A set of native Android UI components and modules for React Native framework. The purpose of this kit is to offer to React Na

May 17, 2022
📊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)

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

Aug 2, 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 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

Aug 6, 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 ])
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

Jul 18, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper
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:

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

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

Aug 4, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share
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

Jun 29, 2022
SVG library for React Native, React Native Web, and plain React web projects.
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

Aug 2, 2022
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components
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

Jun 6, 2022
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

Jul 25, 2022
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

Jul 12, 2022
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

Aug 6, 2022
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

Aug 4, 2022
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

Aug 1, 2022
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

Jul 26, 2022
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

Mar 23, 2022
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

Jul 28, 2022