react-native-elements / react-native-elements-app Goto Github PK

We need to update native app after Expo SDK upgrading @Monte9

./node_modules/@react-navigation/native/dist/Scrollables.js
Module not found: Can't resolve 'react-native-gesture-handler' in 'C:\xampp\htdocs\react\native\react-native-elements-app\node_modules@react-navigation\native\dist'

So can you help me to manage to react native

nothing and thanks

When I try to clone this repo:
it clone --recursive https://github.com/react-native-training/react-native-elements-app.git

This happens:
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

isOpen flag is not marked as false on closed.

Steps:

1. Launch app.
2. Open side menu by pressing hamburger icon.
3. Close side menu by tapping anywhere outside the sidemenu.
4. Press hambuger icon.

Expected result:
Sidemenu opens.

Actual result:
Sidemenu remain closed.

E:/Wokspace/REACTNATIVE_WORKSPACE/react-native-elements-app/src/helpers/vector-fonts.web.js
Module not found: Can't resolve '@expo/vector-icons/src/vendor/react-native-vector-icons/Fonts/Entypo.ttf' in 'E:\Wokspace\REACTNATIVE_WORKSPACE\react-native-elements-app\src\helpers'

It's funny because if I navigate to the middle tab, then use the DrawerNavigator to navigate to the "profile" and then use the DrawerNavigator again to navigate to "components" then the app crashes with an error message about the routing.

Running npm install takes about 15 minutes and finally fails with only .stage under node_modues.

error code EINTEGRITY 12596 error sha512....

Any thoughts?

Tried couple of versions. Now trying with :
node 6.11.3 - npm 4.6.1

Hello,

I expect button will open another screen.

I create a test program to call another class using button's onPress.
But it failed with error(cannot call a lass as a function).

<Button
small
backgroundColor={socialColors.facebook}
onPress={() => Home1()}
title='Information'
buttonStyle={styles.button} />

How can I call class Button's onPress?

Or class has to change to function?

Any suggestion will be appreciated.

Thanks,
Shoji

./homerootcontainer
inject a dispatch
`function mapDispatchToProps (dispatch) {
return {dispatch}
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeNav);

./Home
`componentDidMount() {
const { dispatch }=this.props;
console.log(typeof(dispatch));return;

}

typeof dispatch is undefined.

How can do?

Hi, I got an error like this when I try to run-ios, any idea what's going on here? many thanks.

View has no propType for native prop RCTView.flexGrow of native type float
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.

verifyPropTypes
verifyPropTypes.js:58
requireNativeComponent
requireNativeComponent.js:90

View.js:509
loadModuleImplementation
require.js:122

AppContainer.js:20
loadModuleImplementation
require.js:122

renderApplication.js:15
loadModuleImplementation
require.js:122

AppRegistry.js:19
loadModuleImplementation
require.js:122

index.ios.js:18
loadModuleImplementation
require.js:122
guardedLoadModule
require.js:58
global code
require-0.js:1

hello,

Using react-native-hackathon-starter, I incorporated one application into this environment.
my application is calling Navigator in render section.
I wonder this kind of using Navigator will make a problem or not.
I did not study deeply both environment.

Currently my application seems to works without error.

I 'm afraid futures problem.

Any suggestion appreciated.

Thanks
Shoji

I'd love to know if and how the src/config/font.js file is being used. Is it possible to use something like this system-wide using ThemeProvider or similar?

I don't see any mention of this file in the documentations.

Currently, I have it setup so that when you run npm run deploy, it uses the gh-pages npm package to publish the readme to the website here: https://react-native-elements.github.io/react-native-elements-app/

But we need the RNW project to be deployed on gh-pages instead.

@oxyii can you own this issue since you have it working on your fork already?

Expo added a support for the Icon (https://docs.expo.io/versions/latest/guides/icons.html)

So you could use @expo/vector-icons instead of react-native-vector-icons.
@expo/vector-icons is built on top of it so it has the same amount of icons and is compatible with Expo App.

Might be interesting to switch to it 🌟

If I want to create a "subview", say every person in the list from the list view should have a detailed view when the user is clicked, I could create such a view for elements in the list, but if I open the detailed view then there is not tabbed view and if I swipe left to right and open the drawer from the detailed view then I get an error message about no route for the view.

Error: There is no route defined for key ButtonsTab.
Must be one of: 'Home','Lists_Detail','Details','navigationOptions'

This error is located at:
    in DrawerView (at DrawerNavigator.js:88)
    in Unknown (at createNavigator.js:13)
    in Navigator (at createNavigationContainer.js:226)
    in NavigationContainer (at renderApplication.js:35)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:78)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
getScreenForRouteName

Relevant PR: react-native-elements/react-native-elements#830

I get Unable to resolve "react-navigation" from "App.js" after a clean install. If I install it via: npm install react-navigation I then get an error in the expo that says: Expo Developer Tools is disconnected from Expo CLI. Use the expo start command to start the CLI again. If I uninstall react-navigation the Expo error goes away but the app then shows the original unable to resolve error. React npm expo all installed within the last few days and all the latest versions as far as I know.

I keep getting this error.

I cloned the repository > deleted node_modules > npm install > npm start

Then scanned the QR code, got the loading screen and then this error.

Explain what you did
I've been playing with the demonstration app using my Huawei Mate 10 Pro via Expo. On the Component form the binary toggle switch and the segmented control do not change when pressed.

Expected behaviour
I expect the input state to change

Describe the bug
Pressing the toggle switch just flashes, its state does not change (visually at least)

This effects

• Toggle Switch
• Segmented Control
• Checkbox

To Reproduce
Open the demo app on Expo, scroll down to the Switch row on the Components view. Tap it!

Possible Solution
Can you suggest a possible fix that would address this issue?

Screenshots
If applicable, add screenshots to help explain your problem.

Your Environment (please complete the following information):

Huawei Mate 10 Pro
Android 8.0.0

ref react-native-elements/react-native-elements#829

Hi
I am cloning the same code of your git and import visual studio and install "npm install --save" then go to run "yarn start" it is running but it is showing below issue please solve this my problem Sir

Check from expo https://expo.io/@monte9/react-native-elements-app

I have tried cloning and doing an npm i on the directory and this is what I get:

[email protected] postinstall /Users/blainehuff/Documents/Projects/demario/react-native-elements-app

git submodule update

fatal: destination path '/Users/blainehuff/Documents/Projects/demario/react-native-elements-app/node_modules/react-native-elements' already exists and is not an empty directory.
fatal: clone of '[email protected]:react-native-training/react-native-elements.git' into submodule path '/Users/blainehuff/Documents/Projects/demario/react-native-elements-app/node_modules/react-native-elements' failed
Failed to clone 'node_modules/react-native-elements'. Retry scheduled
fatal: destination path '/Users/blainehuff/Documents/Projects/demario/react-native-elements-app/node_modules/react-native-elements' already exists and is not an empty directory.
fatal: clone of '[email protected]:react-native-training/react-native-elements.git' into submodule path '/Users/blainehuff/Documents/Projects/demario/react-native-elements-app/node_modules/react-native-elements' failed
Failed to clone 'node_modules/react-native-elements' a second time, aborting
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: git submodule update
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/blainehuff/.npm/_logs/2018-05-14T02_01_51_246Z-debug.log
2018-05-14T02_01_51_246Z-debug.log

Hey,

I am playing with the app on iPhone 7 and Nexus 5X. On both devices I have installed the app via Expo.

On iPhone the app is working decently, but on Nexus its quite slow. I wonder what's the reason.

• is it navigation lib slow?
• is it because of the expo?
• react-native-elements are too heavy?

I am looking for a right tech stack for the app I plan to build and I am confused with the performance issues of the demo app.

Video clip where I recorded how slow the app on Nexus is: http://take.ms/gi6ET

Unable to resolve module HSText from react-native-hackathon-starter/src/home/Home.js in its module map

While trying to run the app by doing npm start after performing npm install, Expo fails to build the JavaScript bundle and I get the following error message:

Unable to resolve "react-native-screens" from "node_modules/react-navigation-stack/lib/module/views/StackView/StackViewCard.js"

Installing react-native-screens as a dependency by doing expo install react-native-screens seems to have fixed the issue.

Dear all,

I've been running this project on real device, but faced an extremely slow response while clicking side menu and the 3rd tabbar. It looks like it's "rendering" a real large UI set.

Device: iPhone 6s
OS: iOS 10
Toolchain: XCode 8 (Didn't change compile flags)

Hello react-native-hackathon-starter,

I'm just studying this APL, and have one question.

AppRootContainer is called in IOS as follows.

import AppRootContainer from './src/AppRootContainer'
const Rera = () => (

)

but I can't see the point where AppRootContainer is called in Android.

in Android environment, Please explain the structure of this?

Thanks
Shoji

Re #64, #49, it is clear that people have difficulties using this app without expo.

Is there any interests having a branch with expo removed?
I could prepare a PR if needed.

I'm pushing a new route, and wondering how I might hide the Tab Bar in certain routes?

This happens when

Please provide an updated example of the demo app with the latest expo version 34.0.0. Actually with this version of demo app if you try to upgrade expo There's a lot of errors.

This happens when trying to pass an <Icon /> component as text in a Button component.
Buttons should be able to accept Icons as text.

If I try to pass an icon property to Button without a text prop, the icon gets rendered to the left hand side of the button.

I started new app from scrach( React native init ) but there input not wotk.
error occured when i implement input.
i think react native elements is the best library in react native.

Environment:-

{
"name": "New app from Start",
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": [
"./assets/fonts"
]
},
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"@babel/runtime": "^7.1.2",
"axios": "^0.18.0",
"moment": "^2.22.2",
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.1",
"react-native-elements": "^0.19.1",
"react-native-linear-gradient": "^2.4.2",
"react-native-screen-orientation": "^1.1.0",
"react-native-vector-icons": "^6.0.2",
"react-navigation": "^2.18.0",
"schedule": "0.4.0"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.48.1",
"react-test-renderer": "16.6.0-alpha.8af6728"
},
"jest": {
"preset": "react-native"
}
}

Code :-

              <View style={{ backgroundColor: 'transparent', marginTop: SCREEN_HEIGHT / 15 }}>

                <Input
                  placeholder='INPUT WITH ICON'
                  leftIcon={{ type: 'font-awesome', name: 'chevron-left' }}
                />
              </View>

OR

              <View style={{ backgroundColor: 'transparent', marginTop: SCREEN_HEIGHT / 15 }}>

                <Input
                  inputContainerStyle={{
                    borderRadius: 40, backgroundColor: 'rgba(41,122,94,0.4)', borderWidth: 1,
                    borderColor: "transparent", height: SCREEN_HEIGHT / 15, width: SCREEN_WIDTH / 1.3, marginVertical: 10
                  }}
                  maxLength={40} multiline={false}
                  ref={input => this.emailInput = input}
                  onChangeText={(email) => {
                    this.setState({ email: email })
                    this.setState({ email_valid: this.validateEmail(email) })
                    // this._onshow({ text, id, type })
                  }}
                  value={email}
                  // value={this.state.answerArray.hasOwnProperty(id) ? this.state.answerArray[id] : null}
                  leftIcon={<Icon type='feather'
                    name="mail" color="rgba(63, 174, 135,0.6)" size={SCREEN_HEIGHT / 35} />}
                  iconContainerStyle={{ marginLeft: 30 }} placeholder="Email"
                  placeholderTextColor="rgba(63, 174, 135,0.6)"
                  inputStyle={{ marginLeft: 10, marginRight: 10, color: "white", fontSize: SCREEN_HEIGHT / 41 }}
                  autoCapitalize="none" autoCorrect={false} keyboardAppearance="light"
                  errorStyle={{ textAlign: 'center', fontSize: Fonts.size.regular }}
                  errorMessage={email === "" ? null : email_valid ? null : "Please enter a valid email address"}
                  keyboardType="email-address" returnKeyType="next"
                  onSubmitEditing={() => {
                    this.setState({ email_valid: this.validateEmail(email) });
                    this.otpInput.focus();
                  }} blurOnSubmit={false} />
              </View>

Error :-

When I try to clone this project, the clone fails as below.

E:\Venkat\Sources\expo>git clone --recursive https://github.com/react-native-training/react-native-elements-app.git
Cloning into 'react-native-elements-app'...
remote: Counting objects: 1289, done.
remote: Compressing objects: 100% (46/46), done.
remote: Total 1289 (delta 46), reused 66 (delta 32), pack-reused 1198
Receiving objects: 100% (1289/1289), 6.00 MiB | 1.63 MiB/s, done.
Resolving deltas: 100% (642/642), done.
Submodule 'node_modules/react-native-elements' ([email protected]:react-native-training/react-native-elements.git) registered for path 'node_modules/react-native-elements'
Cloning into 'E:/Venkat/Sources/expo/react-native-elements-app/node_modules/react-native-elements'...
Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:react-native-training/react-native-elements.git' into submodule path 'E:/Venkat/Sources/expo/react-native-elements-app/node_modules/react-native-elements' failed
Failed to clone 'node_modules/react-native-elements'. Retry scheduled
Cloning into 'E:/Venkat/Sources/expo/react-native-elements-app/node_modules/react-native-elements'...
Host key verification failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:react-native-training/react-native-elements.git' into submodule path 'E:/Venkat/Sources/expo/react-native-elements-app/node_modules/react-native-elements' failed
Failed to clone 'node_modules/react-native-elements' a second time, aborting

E:\Venkat\Sources\expo>
E:\Venkat\Sources\expo>ssh-keygen
'ssh-keygen' is not recognized as an internal or external command,
operable program or batch file.

Can I eject this project and create a native app that runs with native Android instead of expo?

Or is it only working with the expo?

Edit: I could run it as a native Android app with my Android device after (1) ejecting after adding eject script and (2) adding back node_modules by running npm install and then making a manual gradlew assembleRelease (3) deleted the Expo imports from the code (4) Changing the default script to App.js

Now I can run the thing with my physical Samsung S8 :-)

Expo says:
This project uses Expo SDK v23.0.0. If you want to open this project, the author will need to update the project's SDK version.

I would like to view this library in Expo to decide if I want to use it.

@Monte9 My english is bad, so I'll not change readme )))

I think Build must be before deploy. Something like this:

Build it

(...build instructions, yarn build:ios, ..., yarn build:web ...)

Deploy it

after yarn build:web you can see generated build folder. This folder can be hosted as static website. For example you can publish on Github Pages via gh-pages cli

gh-pages -d build

Note don't forget to add or change "homepage" key in your package.json

...

and bla-bla-bla ....

Platform:
Android

Steps:

1. Launch app on Android
2. Tap on About
3. Scroll all the way to bottom

Expected result:
Scroll smoothly

Actual result:
Stutter at Half_Dome_from_Glacier_Point

https://github.com/react-native-training/react-native-elements-app
I have used react-native-elements-app project as reference to build my own app, but i am facing problems when ejecting, need help.

The respective warning pops up on launching the application:-

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
- node_modules/react-native/Libraries/Lists/VirtualizedList.js:1054:16 in ScrollView.Context.Consumer.props.children
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:14701:25 in updateContextConsumer
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20459:25 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19370:24 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19347:39 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18997:22 in renderRoot
* [native code]:null in renderRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18851:26 in flushSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:6416:14 in flushSync$argument_0
- node_modules/react-refresh/cjs/react-refresh-runtime.development.js:218:32 in mountedRoots.forEach$argument_0
* [native code]:null in forEach
- node_modules/react-refresh/cjs/react-refresh-runtime.development.js:210:25 in mountedRoots.forEach$argument_0
- node_modules/react-native/Libraries/Core/setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
- node_modules/metro/src/lib/polyfills/require.js:609:10 in setTimeout$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:399:17 in callTimers
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

RNE demo app won't run due to this error:

The buggy code is located at node_modules/expo/src/Asset.js:

import { NativeModules, PixelRatio, Platform } from 'react-native';
import AssetRegistry from 'react-native/Libraries/Image/AssetRegistry';
import AssetSourceResolver from 'react-native/Libraries/Image/AssetSourceResolver';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

import Constants from './Constants';

const FS = NativeModules.ExponentFileSystem;

// Fast lookup check if assets are available in the local bundle.
const bundledAssets = new Set(FS.bundledAssets || []);

The package.json is:

{
  "name": "react-native-elements-app",
  "version": "1.0.0",
  "description": "Demo app for React Native Elements UI Library",
  "author": "Monte Thakkar",
  "private": true,
  "main": "main.js",
  "dependencies": {
    "@expo/vector-icons": "6.3.0",
    "expo": "26.0.0",
    "lodash": "^4.17.4",
    "react": "16.3.0-alpha.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
    "react-native-touchable-scale": "2.0.0",
    "react-native-elements": "^1.0.0-beta3",
    "react-native-ratings": "^5.3.0",
    "react-navigation": "1.5.8"
  },
  "scripts": {
    "postinstall": "git submodule update",
    "clean-install":
      "rm -rf node_modules && npm cache clean --force && watchman watch-del-all && npm install"
  }
}

Thanks in advance for considering this issue.

UPDATE:
I created a new project using create-react-native-app and copied the files and faced a new problem:

Checked this from expo https://expo.io/@monte9/react-native-elements-app

the console is stuck after running "react-native link" command

Omri@OMRI-LAPTOP MINGW64 /c/Workspace/CrossPlatform/React-Native-Elements/react-native-hackathon-starter (master)
$ react-native link
rnpm-install info Linking react-native-vector-icons android dependency
rnpm-install info Android module react-native-vector-icons has been successfully linked
rnpm-install info iOS module react-native-vector-icons is already linked
rnpm-install info Linking assets to ios project
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

Running on Windows 10

This new release has issue with left sidebar, I don't see it when running on IOS emulator..