react-ui-kit/dribbble2react

Transform Dribbble designs to React-Native code | Shop UI Kit >>

dribbble2react's Issues

Quote - chat layaout

Name your screen design
mychat

Share the design source / link
https://dribbble.com/shots/5557158-Rainbow-Messenger-flow

You can give me a quote?

Facebook Reactions

Name your screen design
Facebook Reactions

Share the design source / link
https://dribbble.com/shots/3238568

Hi, @hetmann congratulations for your job.

Do you think it's possible to make it happen?
Considering the following points:

• a list of posts, each with its own reaction, without conflict.
• must also work with Android, I always see your videos but only configured with Ios, and experience for many things are different.

If you were able to bring your projects to https://snack.expo.io, it would be very interesting to try them, without creating a project.

BookApp

Can I convert these to new version? like React Navigation is 5.x now.

Name your screen design
I can start from Plant-App.

Crypto Wallet - [UI Recreation Request]

App Name
Crypto Wallet

Dribbble Shot
https://dribbble.com/shots/3998130-Mobile-App-Crypto-Wallet/attachments/915006

Keep going your fantastic work!

Please :)

Plant app bugs (undefined is not an object (evaluating 'theme.label'))

TypeError: TypeError: undefined is not an object (evaluating 'theme.label')

Chat: A minimal mobile app UI kit

Name your screen design
Chat: A minimal mobile app UI kit

Share the design source / link
https://www.invisionapp.com/inside-design/design-resources/chat/

UI bug with plant app

When clicking on an input, it pushes everything into the top..

just reporting it, up to you if u wanna fix it.

Responsive Screen

i just start using your react kit. You give static size in theme how it well in all phones (big, small).
how you achieve consistent app design across different size of phones.

Build errors - unable to resolve react-native-screens

This error is across all the apps.

Error that's seen in velocity-

Unable to resolve "react-native-screens" from "node_modules/react-navigation-drawer/lib/module/views/DrawerView.js"

Solution: add

"react-native-screens": "^2.0.0-beta.7",

in all the app's package.json.

I can work on the PR for this over the end of the day.

Driving AI assistant

Hi @hetmann, I opened an issue on github as you reported.

The problems are as follows:

• The upper part of the toolbar, too attached with the menu, would take a bit of bottom space.
• The side scroll does not work the elements do not scroll

As you indicated, the design is not made for android but I point it out the same.

Link expo: https://snack.expo.io/rkNyAw8uN

I suggest you put the expo link in the readme, it would be useful for users.

Parking APP: Err 500 Unable to resolve "./screens/Map" from "App.js

Parking APP

Hi,

Many thanks for this project, I have the following error:
"Unable to resolve "./screens/Map" from "App.js"
Failed building JavaScript bundle."

Please see below the screenshot on emulator. Can you please help?

:D Thanks!

Parking Finder App issue

Hey, thanks for sharing this project. I found out that in the parking finder app information tab is not changing when I select different parking spots.

Home rental - create an app where people can add homes for rent

Name your screen design
Let me know the title/name, e.g.: My Custom App

Share the design source / link
Let me know the design source or link (preferable from dribbble)

Needs more documentation.

• Testing the plant-app*

Okay, so I thought setup would be very simple, (drop files in a create-react-native-app, then npm install then react-native run-android?

That fails with:

PS D:\Github\appname> react-native link
D:\Github\appname\node_modules\@babel\core\lib\config\files\plugins.js:152
    throw e;

Error: Cannot find module 'metro-react-native-babel-preset' from 'D:\Github\appname'

Also what is metro-react-native-babel-preset? where should that go

---

Also screens/Signup.js should be screens/SignUp.js

---

Unable to resolve "react-native-gesture-handler" from "node_modules@react-navigation\native\src\Scrollables.js" < on expo start -> run on android emulator, that should be in package.json

Travel Article Application

Travel Article Application

Collection of images:
https://dribbble.com/shots/5729892-Travel-Article-Application
https://dribbble.com/shots/5717917-Travel-Article-Application
https://dribbble.com/shots/5774759-Photo-Album-Application

Using RN CLI Exception

When copying the Project Driving to a fresh RN CLI project, i imported all the necessary packages and updated some files accordigly

but when executing it gives me a error :

You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of 'Welcome'

Any help will be appreciated

Request to add HacktoberFest

Please add 'hacktoberfest' as a repository topic if possible. This will definitely bring some contributions to this amazing repo from the community

Link for more info - Hacktoberfest/hacktoberfest-2020#596

Cheers 👍

Element type is invalid. Check the render method of `Button`.

Hi there!
I was trying to setup the plant app locally, however I found this unresolved issue:

I realised that the same issue is thrown on the original project snack expo:

Need your help in this! :)

Bug with Button Component

http://prntscr.com/nsfzpk
Screenshot

im not able to change the button color
its always white, anywhere i use it.

Camping Spots Finder App

Hi @hetmann , congratulations for the projects, I'm trying them out.
I tried "Camping Spots Finder App", on android even if the design is not made for Android I would advise you to try it.
I noticed a minimal thing, but if one has an expert eye, he notices it.
In the menu part, "all, Tenting, Rv camping", the color of the menu does not take everything but leaves a minimum space of 1px, which in my opinion from a little disturbance, is more noticeable in the part where there are the parts rounded.
Not if a problem due to an external module but I report it anyway.

I uploaded an image:

Link expo: https://snack.expo.io/rkPMlKIu4

P.Š.
I would advise you in the future that when you load a new project, you will also upload the parts to expo.
So users can try a demo version even without having to load them.

I suggest you put the link I created for expo in the readme of the project.

Demos not working

The expo demo's and the app is crashing on Android (Galaxy S7 Edge) for few of the apps - Smart Home, Driving AI assistant to name a couple of them.

enclosing error generates.

12:17
SyntaxError: F:\reactNative\plant\screens\Welcome.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (60:3)

here is the little code related to error:-->

renderTermsService() {
		return (
			<Modal animationType="slide" visible={this.state.showTerms} onRequestClose={() => this.setState({ showTerms: false })> 
				<Block padding={[theme.sizes.padding*2, theme.sizes.padding]} space="between">
				
				<Text h2 light> Terms Of Services </Text>

				<ScrollView style={{ paddingVertical: theme.sizes.padding }}>
					
					<Text caption gray height={18}> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</Text>

					<Text caption gray height={18}> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</Text>

					<Text caption gray height={18}> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</Text>

					<Text caption gray height={18}> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</Text>

					<Text caption gray height={18}> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</Text>

					<Text caption gray height={18}> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
					</Text>
				</ScrollView>

				 <Block middle padding={[theme.sizes.base / 2, 0]}>
					<Button gradient onPress={() => this.setState({showTerms: false })}> 
						<Text center white> I understand</Text>
					 </Button>
					</Block>	 
				</Block>
			</Modal>
			)
	}

Car Parking Finder App

Hi @hetmann , I suggest to put in the readme file the following link: https://snack.expo.io/rJygjF8uN

So users can have a trial demo.

Blood Donation App

Hi @hetmann , I suggest to put in the readme file the following link: https://snack.expo.io/rJ2qdFIuE

So users can have a trial demo.

Plant app header

trying to align the back button and login text on the header but failing, padding-top is higher than the bottom?

Error Code:500

I'm unfortunately with a Error 500, App.js. Unable to resolve module 'expo'. Does not exist in the Haste module map. I used the code from github. Tks.

"dependencies": {
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-gesture-handler": "^1.3.0",
"react-navigation": "^3.11.0",
"react-redux": "^7.0.3",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"

MyTrips – Shared Trip Planner App [Request]

Name your screen design
MyTrips – Shared Trip Planner App

Share the design source / link
https://project365.design/2018/12/09/day-343-mytrips-shared-trip-planner-app/

thanks @hetmann

Restaurant App

Restaurant App
Could you please create a video tutorial on how to code this design.

https://dribbble.com/shots/5564540-Adobe-XD-Auto-Animate

Events App

Name your screen design
Events App

Share the design source / link
https://dribbble.com/shots/6331112-Events

Undefined error in Block component

In your plant-app, while learning as soon as I import {Block} from components I get the following error on snack.expo project:

Device: (101:380) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This error is located at:
in App
in RCTView
in RCTView
https://snack.expo.io/@alibth/plants

Driving AI App

It would appear that all the icons that should be in /assets/images/Icon are missing.

Errors after downloading JavaScript bundle

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Button.js:38., 
    in Button (at Welcome.js:144)
    in RCTView (at Block.js:155)
    in Block (at Welcome.js:143)
    in RCTView (at Block.js:155)
    in Block (at Welcome.js:129)
    in Welcome (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:899)
    in RCTView (at StackViewLayout.tsx:898)
    in RCTView (at StackViewLayout.tsx:897)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:985)
    in RCTView (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:394)
    in RCTView (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:384)
    in PanGestureHandler (at StackViewLayout.tsx:377)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:62)
    in RCTView (at Block.js:155)
    in Block (at App.js:61)
    in App (at withExpoRoot.js:26)
    in RootErrorBoundary (at withExpoRoot.js:25)
    in ExpoRoot (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)
`

Also this one:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Button`.

sdk version not supported

how to update to expo sdk 40

Amazon GO app like - Request

App Name: Fast buy

design source links
https://dribbble.com/shots/11046545-Amazon-Go-Concept-App
https://www.behance.net/gallery/64385175/Amazon-Go-shopping-experience

Travel-app

What's the Problem with the Android version?.

building in expo is complete but after that TypeErroe occur.

TypeError: TypeError: undefined is not a function (near '..._reactNative.Animated.evnet...')

This error is located at:
in Welcome (at SceneView.js:9)
in SceneView (at StackViewLayout.tsx:888)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AnimatedComponent (at StackViewCard.tsx:93)
in RCTView (at View.js:44)
in AnimatedComponent (at screens.native.js:59)
in Screen (at StackViewCard.tsx:80)
in Card (at createPointerEventsContainer.tsx:95)
in Container (at StackViewLayout.tsx:971)
in RCTView (at View.js:44)
in ScreenContainer (at StackViewLayout.tsx:383)
in RCTView (at View.js:44)
in AnimatedComponent (at StackViewLayout.tsx:379)
in Handler (at StackViewLayout.tsx:372)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.tsx:103)
in RCTView (at View.js:44)
in Transitioner (at StackView.tsx:40)
in StackView (at createNavigator.js:61)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at createAppContainer.js:429)
in NavigationContainer (at App.js:62)
in RCTView (at View.js:44)
in Block (at App.js:61)
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

This error is located at:
in NavigationContainer (at App.js:62)
in RCTView (at View.js:44)
in Block (at App.js:61)
in App (at withExpoRoot.js:22)
in RootErrorBoundary (at withExpoRoot.js:21)
in ExpoRootComponent (at renderApplication.js:34)
in RCTView (at View.js:44)
in RCTView (at View.js:44)
in AppContainer (at renderApplication.js:33)

• screens\Welcome.js:115:20 in renderIllustrations
• screens\Welcome.js:140:6 in render

• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:10563:21 in finishClassComponent
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14091:21 in performUnitOfWork
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14129:41 in workLoop
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14226:15 in renderRoot
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15193:17 in performWorkOnRoot
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15090:24 in performWork
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15047:14 in performSyncWork
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14925:19 in requestWork
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:14711:16 in scheduleWork
• node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:7700:17 in enqueueSetState
• node_modules\react\cjs\react.development.js:364:31 in setState

• App.js:55:44 in onFinish

• node_modules\expo\build\launch\AppLoading.js:31:20 in _callee$
• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:271:30 in invoke
• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:45:44 in tryCatch
• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:135:28 in invoke
• node_modules@babel\runtime\node_modules\regenerator-runtime\runtime.js:145:19 in
• node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
• node_modules\promise\setimmediate\core.js:123:25 in
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152:14 in _callTimer
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:200:17 in _callImmediatesPass
• node_modules\react-native\Libraries\Core\Timers\JSTimers.js:464:30 in callImmediates

• [native code]:null in callImmediates

• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:320:6 in __callImmediates
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10 in __guard
• node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:17 in flushedQueue

• [native code]:null in flushedQueue
• [native code]:null in invokeCallbackAndReturnFlushedQueue

azerty

Name your screen design
Let me know the title/name, e.g.: My Custom App

Share the design source / link
Let me know the design source or link (preferable from dribbble)

Pathfinder

Name your screen design
Let me know the title/name, e.g.: My Custom App

Share the design source / link
Let me know the design source or link (preferable from dribbble)