Giter VIP home page Giter VIP logo

ct-soft-ui-pro-react-native's Introduction

version GitHub issues open GitHub issues closed

Product

Soft UI PRO React Native is a fully coded app template built over React Native and Expo to allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components in-house to make it look like Soft UI's KIT, minimalistic and easy to use.

Start your development with a Design System for React Native inspired by Soft UI KIT. If you like Soft UI's KIT, you will love this react native app template! It features a huge number of components and screens built to fit together and look amazing.

FULLY CODED COMPONENTS

Soft UI PRO React Native features over 100 variations of components like buttons, inputs, cards, navigations etc, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify inside our theme file.

You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. We wanted the design process to be seamless, so switching from image to the real page is very easy to do.

Components & Cards

Soft UI PRO React Native comes packed with a large number of components and cards. Putting together a mobile app has never been easier than matching together different components. From the profile screen to a settings screen, you can easily customise and build your screens. We have created multiple options for you to put together and customise into pixel perfect screens.

View all components here.

Example Screens

If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example screens. From onboarding screens to profile or discover screens, you will be able to quickly set up the basic structure for your React Native mobile project.

View all screens here.

Let us know your thoughts below. And good luck with development!

Table of Contents

Versions

HTML React-Native
Soft UI Kit Pro Soft UI PRO React-Native

Demo

Menu Extra Screen Best Deal Screen Profile Screen
Menu Extra Screen Best Deal Screen Profile Screen

View more

Quick start

  • Try it out on Expo (Simulator for iOS or even your physical device if you have an Android)
  • Download from Creative Tim

Documentation

The documentation for the Soft UI PRO React Native is hosted at our website.

File Structure

Within the download you'll find the following directories and files:

soft-ui-pro-react-native/
├── App.tsx
├── app.json
├── assets
├── babel.config.js
├── package.json
├── src
│   ├── assets
│   │   ├── fonts
│   │   ├── icons
│   │   └── images
│   ├── components
│   │   ├── Article.tsx
│   │   ├── Block.tsx
│   │   ├── Button.tsx
│   │   ├── Calendar.tsx
│   │   ├── Checkbox.tsx
│   │   ├── Image.tsx
│   │   ├── Input.tsx
│   │   ├── Modal.tsx
│   │   ├── Product.tsx
│   │   ├── Switch.tsx
│   │   ├── Text.tsx
│   │   └── index.tsx
│   ├── constants
│   │   ├── dark.ts
│   │   ├── index.ts
│   │   ├── light.ts
│   │   ├── mocks.ts
│   │   ├── regex.ts
│   │   ├── theme.ts
│   │   ├── translations
│   │   │   ├── en.json
│   │   │   ├── fr.json
│   │   │   └── index.ts
│   │   └── types
│   │       ├── components.ts
│   │       ├── index.ts
│   │       └── theme.ts
│   ├── hooks
│   │   ├── index.ts
│   │   ├── useData.tsx
│   │   ├── useScreenOptions.tsx
│   │   ├── useTheme.tsx
│   │   └── useTranslation.tsx
│   ├── navigation
│   │   ├── App.tsx
│   │   ├── Menu.tsx
│   │   └── Screens.tsx
│   └── screens
│       ├── About.tsx
│       ├── Agreement.tsx
│       ├── Articles.tsx
│       ├── Booking.tsx
│       ├── Chat.tsx
│       ├── Components.tsx
│       ├── Extras.tsx
│       ├── Home.tsx
│       ├── Login.tsx
│       ├── Notifications.tsx
│       ├── NotificationsSettings.tsx
│       ├── Privacy.tsx
│       ├── Profile.tsx
│       ├── Register.tsx
│       ├── Rental.tsx
│       ├── Rentals.tsx
│       ├── Settings.tsx
│       ├── Shopping.tsx
│       └── index.ts
└── tsconfig.json

OS Support

At present, we officially aim to support the last two versions of the following operating systems:

Resources

Reporting Issues

We use GitHub Issues as the official bug tracker for the Soft UI PRO React Native. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Soft UI PRO React Native.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim Facebook: https://www.facebook.com/CreativeTim Dribbble: https://dribbble.com/creativetim Instagram: https://www.instagram.com/CreativeTimOfficial

ct-soft-ui-pro-react-native's People

Contributors

dragosct avatar hetmann avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ct-soft-ui-pro-react-native's Issues

Dependency tree conflict

It has some dependencies on react 16 version and some one react 17 and above. So, npm install is failing to create dependency tree. So, can you please update the packages so it remains consistent?

"Error: Tried to Register Two Views with the Same Name (RNCMaskedView) and 'main' Not Registered"

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting
To successfully load the demo app using expo

Current Behavior

What is the current behavior? After runing npm run start, I get a QR code to scan, I scan successfully, loads the app and splash screen but fails with the errors

ERROR  Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

ERROR  Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. step 1: Download and extract the app
  2. step 2: cd into the extracted app and run npm install
  3. step 3: run npm run start
  4. step 4: scan the generated QR code to load the app in Expo (iOS)
  5. step 5: app should load and fail at the splash screen with the error
ERROR  Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: iPhone 13 PRO running Expo Go v2.29.6
  • Operating System: MacBook Pro running MacOS Monterey V 12.6.6
  • Browser and Version: Google Chrome Version 117.0.5938.92 (Official Build) (x86_64)

Failure Logs

Please include any relevant log snippets or files here.

iOS Bundling complete 1640ms
 WARN  Constants.platform.ios.model has been deprecated in favor of expo-device's Device.modelName property. This API will be removed in SDK 45.
 ERROR  Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
Using node to generate images. This is much slower than using native packages.
› Optionally you can stop the process and try again after successfully running `npm install -g sharp-cli`.

I cant start app with expo start

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [x ] I am running the latest version
  • [ x] I checked the documentation and found no answer
  • [ x] I checked to make sure that this issue has not already been filed
  • [ x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

To be able to run it with Expo start as you said in documentation

Current Behavior

What is the current behavior?

It wont start

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. When i try to use it i have problems with dependencies
  2. It wont run on on web or android

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: pc
  • Operating System: windows
  • Browser and Version: chrome

Failure Logs

Please include any relevant log snippets or files here.

[Bug] The Package Doesn't Work in Web

Version

1.1.0

Reproduction link

https://github.com/najiang/Aster-Salon-Website

Operating System

Windows 10

Device

Desktop

Browser & Version

Chrome Browser

Steps to reproduce

  1. npm install
  2. expo start
  3. Type "w" to open in my browser
  4. See a blank page and errors in the prompt

What is expected?

See the example website.

What is actually happening?

Blank page and run time errors.


Solution

Additional comments

React native project fails to compile on a new project

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

On a clean download and install, expo start should compile and start.

Current Behavior

TypeError: Object(...) is not a function

on

const RNCMaskedView = requireNativeComponent<any>('RNCMaskedView');

It seems the issue has been reported here. I wonder if pinning masked view to the previous version would help.
react-native-masked-view/masked-view#130

It is also possible that this is due to this project using the old version of the package, as this comment mentions:
react-native-masked-view/masked-view#142 (comment)

You are probably using the old package name @react-native-community/masked-view instead of @react-native-masked-view/masked-view

Failure Information (for bugs)

Module../node_modules/@react-native-community/masked-view/js/MaskedView.js
node_modules/@react-native-community/masked-view/js/MaskedView.js:14
  11 | import React from 'react';
  12 | import { View, StyleSheet, requireNativeComponent } from 'react-native';
  13 | 
> 14 | const RNCMaskedView = requireNativeComponent<any>('RNCMaskedView');
  15 | 
  16 | import { type MaskedViewProps } from './MaskedViewTypes';
  17 | 

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. Clean all node modules
  2. yarn install
  3. expo start

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: Macbook air M1

I cant run the Ui/UX kit with expo start. what should i do?is it updated?

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?

Failure Information (for bugs)

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. step 1
  2. step 2
  3. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device:
  • Operating System:
  • Browser and Version:

Failure Logs

Please include any relevant log snippets or files here.

[Bug] OutDated Code

Version

sdk48

Reproduction link

http://no-url.com/

Operating System

windows

Device

android

Browser & Version

miui 11

Steps to reproduce

run locally with an expo

What is expected?

it is supposed to run

What is actually happening?

It throws an error as sdk45 is outdated


Solution

Additional comments

change card Product color when changing status

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [x ] I am running the latest version
  • [ x] I checked the documentation and found no answer
  • [ x] I checked to make sure that this issue has not already been filed
  • [ x] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

The card product requires the background to change color upon receiving a status change

RNCMaskedView ERROR

iOS Bundling complete 13752ms
ERROR Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

Facing issue while start

Error:

Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-config/node_modules/metro-runtime/src/polyfills/require.js:225:40 in guardedLoadModule
at node_modules/metro-config/node_modules/metro-runtime/src/polyfills/require.js:127:23 in metroRequire
at http://192.168.0.109:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:null in global

Invariant Violation: "main" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes
    at node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 in reportException
    at node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 in handleException
  • ... 7 more stack frames from framework internals

OutDated Version

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version

Expected Behavior

It should work on the latest SDK

Current Behavior

error: using expo sdk45 which is outdated.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

run the code.

[Feature Request] Dependencies Updated

What is your enhancement?

I purchased your mobile bundle in other to use the Soft UI Pro React Native but unfortunately for me it has never been updated since its release. I tried to update the dependencies myself but to no avail. Please when should I expect an update from you. Need to use this ASAP!

[Bug] "Error: Tried to Register Two Views with the Same Name (RNCMaskedView) and 'main' Not Registered"

Version

1.1.1

Reproduction link

https://github.com/timchosen/soft-ui-pro.git

Operating System

MacBook Pro running MacOS Monterey V 12.6.6

Device

iPhone 13 PRO running Expo Go v2.29.6

Browser & Version

Google Chrome Version 117.0.5938.92 (Official Build) (x86_64)

Steps to reproduce

step 1: Download and extract the app
step 2: cd into the extracted app and run npm install
step 3: run npm run start
step 4: scan the generated QR code to load the app in Expo (iOS)
step 5: app should load and fail at the splash screen with the error
ERROR Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

What is expected?

To successfully load the demo app using expo

What is actually happening?

After runing npm run start, I get a QR code to scan, I scan successfully, loads the app and splash screen but fails with the errors

ERROR Invariant Violation: Tried to register two views with the same name RNCMaskedView, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

Solution

Additional comments

Soft UI React Native and Soft UI PRO React Native code is outdated could not run it in expo

Please answer the following questions for yourself before submitting an issue.

soft-ui-pro-react-native-v1.0.2

pashkauk@Pavelss-MacBook-Pro soft-ui-pro-react-native-v1.0.2 % npx expo upgrade
┌─────────────────────────────────────────────────────────────────────────┐
│ │
│ There is a new version of expo-cli available (6.3.2). │
│ You are currently using expo-cli 5.4.3 │
│ Install expo-cli globally using the package manager of your choice; │
│ for example: npm install -g expo-cli to get the latest version │
│ │
└─────────────────────────────────────────────────────────────────────────┘
We couldn't find a git repository in your project directory.
It's recommended to back up your project before proceeding.

✔ Would you like to proceed? … yes

✔ You are currently using SDK 45.0.0. Would you like to update to the latest version, 48.0.0? … yes

✔ Installed expo@^48.0.0
✔ Validated configuration.
✔ No additional changes necessary to app.json config.

✖ Failed to upgrade JavaScript devDependencies: jest-expo@^48.0.0 typescript@^4.9.4 @babel/core@^7.20.0 @types/react@~18.0.27

[Bug] React native project fails to build on clean install on web

Version

1.0.0

Reproduction link

#3

Operating System

Big Sur 11.5.2

Device

Macbook air M1

Browser & Version

Chrome (latest), Brave (latest)

Steps to reproduce

  1. Download repo
  2. yarn install
  3. expo stat

What is expected?

Project to compile without errors.

What is actually happening?

TypeError: Object(...) is not a function
on

const RNCMaskedView = requireNativeComponent('RNCMaskedView');


Solution

It seems the issue has been reported here. I wonder if pinning masked view to the previous version would help. It is also possible that this is due to this project using the old version of the package, as this comment mentions:

react-native-masked-view/masked-view#130
react-native-masked-view/masked-view#142 (comment)

You are probably using the old package name @react-native-community/masked-view instead of @react-native-masked-view/masked-view

Additional comments

Internal React error

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • I am running the latest version
  • I checked the documentation and found no answer
  • I checked to make sure that this issue has not already been filed
  • I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Please describe the behavior you are expecting

Current Behavior

What is the current behavior?
Everytime I do changes it is not reloading the app because of errors

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. step 1 npm install --force
  2. step 2 npm update --force
  3. step 3 expo start
  4. you get it...

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

  • Device: Laptop
  • Operating System: Windows 11
  • Browser and Version: Expo Go SDK 48

Failure Logs

Please include any relevant log snippets or files here.
`expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() and SplashScren.hideAsync() instead. https://docs.expo.dev/versions/latest/sdk/splash-screen/
at node_modules\expo-app-loading\build\AppLoading.js:null in componentDidMount
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in commitLayoutEffectOnFiber

  • ... 21 more stack frames from framework internals

Warning: Internal React error: Attempted to capture a commit phase error inside a detached tree. This indicates a bug in React. Likely causes include deleting the same fiber more than once, committing an already-finished tree, or an inconsistent return pointer.

Error message:

%s%s, TypeError: undefined is not a function,
in DrawerView (created by DrawerNavigator)
in DrawerNavigator
in RCTView (created by View)
in View (created by NativeLinearGradient)
in NativeLinearGradient (created by LinearGradient)
in LinearGradient (created by Block)
in Block
in Unknown
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainer
in ThemeProvider
in TranslationProvider
in Unknown (created by App)
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in printWarning
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in error

  • ... 23 more stack frames from framework internals

    in ThemeProvider in NavigationContainer
    in ThemeProvider
    in TranslationProvider
    in Unknown (created by App)
    at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in printWarning
    at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:null in error

  • ... 23 more stack frames from framework internals`

Kindly provide us pure html or bootstrap based template, we not using react.

Prerequisites

Please answer the following questions for yourself before submitting an issue.

  • [yes ] I am running the latest version
  • [ yes] I checked the documentation and found no answer
  • [yes ] I checked to make sure that this issue has not already been filed
  • [ yes] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

Need html template cause we don't use reactjs

Please describe the behavior you are expecting
Need html template cause we don't use reactjs

Current Behavior

Need html template cause we don't use reactjs

What is the current behavior?
Need html template cause we don't use reactjs

Failure Information (for bugs)

Need html template cause we don't use reactjs

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Need html template cause we don't use reactjs

Context

Need html template cause we don't use reactjs

  • Device:
  • Operating System:
  • Browser and Version:

Failure Logs

Need html template cause we don't use reactjs

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.