expo / expo Goto Github PK
View Code? Open in Web Editor NEWAn open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
Home Page: https://docs.expo.dev
License: MIT License
An open-source framework for making universal native apps with React. Expo runs on Android, iOS, and the web.
Home Page: https://docs.expo.dev
License: MIT License
SDK version 12
iOS 10.2.1
Standalone app
When running this code:
await Exponent.Facebook.logInWithReadPermissionsAsync(fbAppId, {
permissions: ['public_profile', 'email'],
behavior: 'browser',
});
This behavior successfully launches Safari, and if I have no facebook login stored in Safari, will prompt me for my facebook credentials. If I am already logged-in to facebook, it will show me the "you have already authorized ....". In either case, I press 'ok' and am presented with this screen.
The login process never completes, if I press "Done" it is registered as a cancelled facebook login.
This exact behavior also happens with behavior: 'system'
and I assume behavior: 'native'
if there is no facebook account linked to iOS or no native facebook app installed.
See approach for implementing share extensions with RN here: https://github.com/alinz/react-native-share-extension
Curious if this is already something that's on your minds (before I attempt to implement).
Thanks for all your work thus far, really enjoying the Exponent dev experience!
When I try to load any exponent on an iPhone running iOS 9, I'm getting this error message: "There was a problem loading the experience". When I click Show Details
, I displays this message.
exp://exp:host/@exponent/pomodoro
"This experience could not be verified." (code undefined)
This is probably the same native sdk, and allows password-less logins using email or mobile device.
The IOS app needs an update to link the AirGoogleMaps library which was introduced in the latest version of react-native-maps, this way <MapView provider='google' />
can be used to view Google Maps on IOS. At the moment, when using provider='google'
in Exponent the app crashes.
Instructions are available here.
Hi there,
I am using a boilerplate purchased from StrapMobile and want to convert it to use with Exponent.
I ran the exp convert and everything seemed to go well. Then it said I have to replace AppRegistry.registerComponent('YourApplicationName', () => YourRootComponent) by Exponent.registerRootComponent(YourRootComponent) and also add the import Exponent from 'exponent'.
I searched in the code and believe those two places where I need to do the replacements are in index.ios.js and index.android.js
index.ios.js Before:
'use strict';
import { AppRegistry } from 'react-native'
import setup from './js/setup'
AppRegistry.registerComponent('MyApp', setup);
index.ios.js After:
'use strict';
import Exponent from 'exponent'
import setup from './js/setup'
Exponent.registerRootComponent(setup);
setup.js
'use strict';
import React, {Component} from 'React';
import App from './App';
import configureStore from './configureStore'
import {Provider} from 'react-redux';
import {StyleSheet, View, Text} from 'react-native';
function setup():React.Component {
class Root extends Component {
constructor() {
super();
this.state = {
isLoading: false,
store: configureStore(()=> this.setState({isLoading: false})),
};
}
render() {
return (
<Provider store={this.state.store}>
<App store={this.state.store} />
</Provider>
);
}
}
return Root
}
export default setup;
And it's giving me these errors when launching project from XDE into IOS simulator:
setup(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
mountComponent
ReactCompositeComponent.js:194
mountComponent
ReactReconciler.js:47
performInitialMount
ReactCompositeComponent.js:370
mountComponent
ReactCompositeComponent.js:257
mountComponent
ReactReconciler.js:47
mountChildren
ReactMultiChild.js:240
initializeChildren
ReactNativeBaseComponent.js:69
mountComponent
ReactNativeBaseComponent.js:187
mountComponent
ReactReconciler.js:47
performInitialMount
ReactCompositeComponent.js:370
mountComponent
ReactCompositeComponent.js:257
mountComponent
ReactReconciler.js:47
mountChildren
ReactMultiChild.js:240
initializeChildren
ReactNativeBaseComponent.js:69
mountComponent
ReactNativeBaseComponent.js:187
mountComponent
ReactReconciler.js:47
performInitialMount
ReactCompositeComponent.js:370
mountComponent
ReactCompositeComponent.js:257
mountComponent
ReactReconciler.js:47
performInitialMount
ReactCompositeComponent.js:370
mountComponent
ReactCompositeComponent.js:257
mountComponent
ReactReconciler.js:47
performInitialMount
ReactCompositeComponent.js:370
mountComponent
ReactCompositeComponent.js:257
mountComponent
ReactReconciler.js:47
mountComponentIntoNode
ReactNativeMount.js:51
perform
Transaction.js:138
batchedMountComponentIntoNode
ReactNativeMount.js:66
perform
Transaction.js:138
batchedUpdates
ReactDefaultBatchingStrategy.js:63
batchedUpdates
ReactUpdates.js:98
renderComponent
ReactNativeMount.js:117
renderApplication
renderApplication.js:33
runApplication
AppRegistry.js:105
__callFunction
MessageQueue.js:236
<unknown>
MessageQueue.js:108
guard
MessageQueue.js:46
callFunctionReturnFlushedQueue
MessageQueue.js:107
Any help would be much appreciated!
Support for multiple languages would be great. This package does it:
https://github.com/AlexanderZaytsev/react-native-i18n
As do some others. But they all use native modules.
Genymotion is using Android Studio's sdk path.
I ran exp path after running npm install -g exp and made sure it includes the Android Studio sdk path
My app runs on my android hardware device on the exponent app.
When I try to install it (on 5.1 or 6.0) on a Genymotion emulator.. it says
Uninstalling Exponent from Android device.
Downloading latest version of Exponent
Installing Exponent on device
all good right? But on the emulator nothing is happening at all. No icon.. no app
running adb logcat shows this.. which seems to be the culprit? But why is it invalid? How to clear it and force a valid download?
D/ ( 1820): Zip: EOCD not found, /data/local/tmp/Exponent-1.11.1.apk is not zip
W/zipro ( 1820): Error opening archive /data/local/tmp/Exponent-1.11.1.apk: Invalid file
D/asset ( 1820): failed to open Zip archive '/data/local/tmp/Exponent-1.11.1.apk'
W/DefContainer( 1820): Failed to parse package at /data/local/tmp/Exponent-1.11.1.apk: android.content.pm.PackageParser$PackageParserException: Failed to parse /data/local/tmp/Exponent-1.11.1.apk
Hello
I'm trying to use this library:
https://github.com/xinthink/react-native-material-kit
It requires to set up some native dependencies:
JDK 7+ is required
Add the following snippet to your android/settings.gradle:
include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')
Declare the dependency in your android/app/build.gradle
dependencies {
...
compile project(':RNMaterialKit')
}
Import com.github.xinthink.rnmk.ReactMaterialKitPackage and register it in your MainActivity (or equivalent, RN >= 0.32 MainApplication.java):
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactMaterialKitPackage()
);
}
How can I do this in a exponent project?
It would be helpful if there were an onFullscreenDismissed prop for video, or a fullscreen-only mode. Ideally both.
In some apps, like the one I am working on, the expected functionality is that a video opens in fullscreen, and the video is terminated once fullscreen is dismissed. I think this is fairly common video functionality for many apps.
These are both features that other players like react-native-youtube have
thanks much
Would it be possible to add logInWithPublishPermissions
for the Facebook integration to authorize additional permissions? Can see more about it with the Facebook SDK here: https://developers.facebook.com/docs/reference/ios/current/class/FBSDKLoginManager/
The link to the native code documentation is broken: https://docs.getexponent.com/versions/v12.0.0/guides/changing-native-code.html
I am interested in using exponent, but I will need a bunch of native code components and would like to know what the roadmap is for the near future.
When passing in the onEnd prop:
If video playback has already reached the end of the video, exiting fullscreen mode will trigger the onEnd event a second time (it already fired once when the playback reached the end).
If video playback has NOT reached the end of the video, exiting fullscreen mode will not trigger onEnd event
Exiting fullscreen should either always invoke onEnd, or never invoke onEnd.
I would like to have the ability to import additional contact information that returns data similar to this library: https://github.com/rt2zz/react-native-contacts
recordID: 1,
company: "",
emailAddresses: [{
label: "work",
email: "[email protected]",
}],
familyName: "Jung",
givenName: "Carl",
jobTitle: "",
middleName: "",
phoneNumbers: [{
label: "mobile",
number: "(555) 555-5555",
}],
thumbnailPath: "",
}```
Thanks!
The exponent client didn't support device rotation.
Here is a minimal repro of this bug.
package.json
{
"name": "cirlce",
"version": "1.0.0",
"description": "This is a circle",
"author": null,
"private": true,
"main": "fail.js",
"dependencies": {
"exponent": "^13.1.0",
"react": "~15.4.0",
"react-native": "https://github.com/exponent/react-native/archive/sdk-13.0.3.tar.gz"
},
"devDependencies": {
"babel-eslint": "^7.0.0",
"eslint": "^3.8.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1"
}
}
Breaking example:
fail.js
import React from 'react';
import Exponent, {
Components,
} from 'exponent';
const { Svg } = Components;
const Circle = () => {
return (
<Svg height={100} width={100}>
<Svg.Circle
cx={50}
cy={50}
r={40}
stroke="red"
fill="blue"
strokeWidth={1}
/>
</Svg>
);
};
Exponent.registerRootComponent(Circle);
Working example:
works.js
import React from 'react';
import Exponent, {
Components,
} from 'exponent';
const { Svg } = Components;
const Circle = () => {
return (
<Svg height={100} width={100}>
</Svg>
);
};
Exponent.registerRootComponent(Circle);
Exponent version: 1.9.2.103786
iOS: iPhone 6 Simulator with iOS 9.2, also verified on real iPhone 6 iOS 10.0.2
Android: Nexus 6P, latest android
I was experimenting with loading custom fonts with exponent. Everything works great with Text
Components. As soon as I try to use a TextInput
, it also works, but always prefers the default font size (whatever that is).
I tried the same code on a friend's above android device, and it was able to successfully change the font size.
If I do not use the custom font, (fontFamily: undefined
) or if I use a a fontFamily that is built-in to iOS (fontFamily: 'AmericanTypewriter-CondensedBold'
) then the sizes of the fonts do change.
I am a medium-experienced iOS developer, so I am happy to help with this to the best of my abilities, but I am very new to the exponent codebase, and couldn't root cause this myself :(
Code Sign error: No code signing identities found: No valid signing identities (i.e. certificate and private key pair) matching the team ID “C8D8QTF339” were found.
Audio playback also should be supported in Exponent as with video play.
Hello! I am new here.
I always thought that there should something like Ionic in React Native, and I guess I found a charm!
Is there any plan to support audio recording?
I guess the advent of WebRTC and openness of automatic speech recognition makes the demand for audio recording (with streaming) surge thesedays.
Any road map for this?
I made changes to my app. On XDE v14 I hit 'restart', then 'publish'. Then launched Exponent on my physical android phone and loaded up the URL, and it still showed me the old app code.
I had to go under the androids app settings.. scroll down to Exponent.. clear the cache there.. then close and restart the app.. and only then did I see the new changes.
Could we have an easier way of clearing the cache
Very interesting project!
I follow the setup guide to build exponent and run iOS shell successful.
But , the shell app tell me unhandled JS Exception: Module RCTLog is not a registered callable module.
when i enter exp url .
Thanks
After detaching the project, running the project creates a whole bunch of these errors showing conflicts between node_modules/react-native/Libraries and ios/Pods/React/Libraries:
Failed to build DependencyGraph: @providesModule naming collision:
Duplicate module name: ActionSheetIOS
Paths: /Users/Projects/app/node_modules/react-native/Libraries/ActionSheetIOS/ActionSheetIOS.js collides with /Users/Projects/app/ios/Pods/React/Libraries/ActionSheetIOS/ActionSheetIOS.js
Documentation says:
Each time you publish your app, Exponent will upload your assets to Amazon CloudFront, a blazing fast CDN.
I want the assets to exist when user install app from play market with no need to wait anymore for loading assets from CDN and to avoid this step:
In order to keep the loading screen visible while we cache our assets, we render Exponent.Components.AppLoading and only that component until everything is ready.
Is it possible to include assets in app bundle and remove AppLoading component because it will be useless?
This issue is to track adding a chromeOS app for exponent, relying on the recent addition of the android runtime component.
This would not only add another platform where extant apps can be run (iOS, Android or ChromeOS), but it would also allow developers to develop+test their applications using a chromebook instead of a physical device or a simulator (which traditionally are more resource intensive than simulators).
ChromeOS officially supports android apps on a subset of chromebooks, and quite a few android apps already support this (evernote, vine, skype, adobe lightroom, snapchat, etc).
When running in deverloper mode, all chromebooks (not restricted to a supported hardware subset) can run android apps, and can use ARC welder to convert android APK's into chromeOS apps (https://chrome.google.com/webstore/detail/arc-welder/emfinbmielocnlhgmfkkmkngdoccbadn).
I tried converting exponent APK to a chromeOS app using ARC welder, but there were issues after the splash screen. I suspect this may have to do with exponent trying to access some device not available on my laptop (for instance, GPS), but didn't dig any further.
I love the quick setup time and configuration of exponent, but I'm hesitant to jump in without the ability to link libraries. I see in the docs that you can use ExponentKit to 'detach' an app, but I'm wondering if it's possible to do basic linking without that. Many modules respond to react-native link
, allowing for things like built-in fonts (I'm not a fan of async fonts) and other native functionality. Is it possible to do this somehow, or is 'detaching' the way?
λ exp i
? Project name: Exponent
? Project type. Options are: "blank", "tabs" blank
[exp] Downloading project files...
[exp] Extracting project files...
Process exited with non-zero code: 2
ERROR: Unexpected end of data : blank-1.8.0.tar
Process exited with non-zero code: 2
[exp] unexpected end of file
Error: unexpected end of file
at Zlib._handle.onerror (zlib.js:355:17)
λ tar --version
tar (GNU tar) 1.29
Copyright (C) 2015 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
Written by John Gilmore and Jay Fenlason.
λ node -v; npm -v; exp --version
v7.2.1
4.0.5
0.29.0
Microsoft Windows [v6.1.7601]
Using code from UIExplorer WebView example:
https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/WebViewExample.js
https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/messagingtest.html
Works on Android.
[email protected]
Output in exp
exp] <START> Processing asset request asset: ReactABI12_0_0-js-navigation://postMessage
[exp] Error: 'ReactABI12_0_0-js-navigation://postMessage' could not be found, because 'ReactABI12_0_0-js-navigation:/' is not a subdirectory of any of the roots ('/home/jim/exp-init')
at Promise.all.then.stats (/home/jim/exp-init/node_modules/react-native/packager/react-packager/src/AssetServer/index.js:191:13)
at tryCallOne (/home/jim/exp-init/node_modules/promise/lib/core.js:37:12)
at /home/jim/exp-init/node_modules/promise/lib/core.js:123:15
at flush (/home/jim/exp-init/node_modules/asap/raw.js:50:29)
at _combinedTickCallback (internal/process/next_tick.js:67:7)
at process._tickCallback (internal/process/next_tick.js:98:9)
[exp] <END> Processing asset request asset: ReactABI12_0_0-js-navigation://postMessage (6ms)
The WebView displayes the text
Asset not found
If we use the html from inside the component, we get the following error
[exp] Encountered an error loading page {"domain":"WebKitErrorDomain","canGoBack":false,"target":8,"code":101,"loading":false,"title":"666","canGoForward":false,"description":"The URL can’t be shown","url":"about:blank"}
Authenticate with google(on Android) redirects to google.com not to app itself.
Can be reproduced with exp.host@notbrent/native-component-list google auth button.
url redirected:
https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=host.exp.exponent%3A%2Foauthredirect&client_id=733666839474-29hiep386cbm9u262lvgjf96uvq8pglu.apps.googleusercontent.com&response_type=code&state=hZ3f26YcYdrzfQLpvWRm7w&scope=profile%20email&code_challenge=5xHtVcrqLe_hCKOnj_rLYgjSRZut98C8O3ATsMfS8j8&code_challenge_method=S256
Exponent.Google.logInAsync({
behavior: 'web',
androidClientId: '733666839474-29hiep386cbm9u262lvgjf96uvq8pglu.apps.googleusercontent.com',
iosClientId: '733666839474-l0s6c0d1m4f844cin668iilgears8b2n.apps.googleusercontent.com',
androidStandaloneAppClientId: '733666839474-g2i9bjpet38je9159v6aq2s822pk2rop.apps.googleusercontent.com',
iosStandaloneAppClientId: '1052406890180-eo50cdr1fnqu0kgpg3rh8hvchb49vf98.apps.googleusercontent.com',
scopes: ['profile', 'email'],
})
.then((result) => {
if (result.type === 'success') {
return path.success({ accessToken: result });
}
return path.failed({ accessToken: err });
})
.catch(err => path.failed({ accessToken: err }));
First time using react and exponent. Let me know if there is a better place to ask this question.
I would like to have a basic routing so I believe ex-navigation is the recommended way to do it. please correct me if I am wrong. I heard about it in one of the introduction videos.
I copy pasted the example from https://github.com/exponentjs/ex-navigation. The only modification I made is changed AppRegistry.registerComponent
to Exponent.registerComponent
. From some reason I get this error: "SyntaxError: /home/oren/p/exponent/login/node_modules/@exponent/ex-navigation/src/ExNavigation.js: Unexpected token (32:9)"
This is the offending line: export * as NavigationStyles from './ExNavigationStyles';
Here is my code: https://github.com/oren/login/blob/69588f799b7706410b55f9a638cc09810de50e72/main.js
Thanks!
Now for pinch gesture show the exponent menu. I want use pinch to zoom on my app. Is this possible? Maybe you could use a 3 finger pinch instead.
According to the documentation, when the server is not reachable (for whatever reason) the app still starts by using the cached version of the app.
But as soon as I close my Exponent XDE, I'm unable to open the app on my phone.
It tries to connect to my local server and then either timeouts or complains about the tunnel being broken.
Am I missing something?
The idea is that I would like to use my app even when my server is down and without having to publish it to Exponent.
Thanks.
Not sure whether this is the correct place to raise this issue as this is related to Exponent website.
Currently, Exponent app have QR scan feature which is cool, but we are not able to fully utilise this feature by scanning QR code from Exponent project website to try out demo without typing on mobile device. It will be great to display QR code on Exponent project website.
Location request timed out
this is the error I get whenever I'm trying to access the user's location.
Here's my code:
import Exponent from 'exponent';
export async function getPosition() {
const {Location, Permissions} = Exponent;
const {status} = await Permissions.askAsync(Permissions.LOCATION);
if (status === 'granted') {
return Location.getCurrentPositionAsync({enableHighAccuracy: true});
} else {
throw new Error('Location permission not granted');
}
}
some component
componentDidMount() {
getPosition().then((position) => {
if (position) {
console.log(position);
}
}).catch((e) => {
// this one is firing the error instantly
alert(e + ' Please make sure your location (GPS) is turned on.');
});
}
Android 6.0.1
Any plan to make TypeScript support for exponent like exponent has done with ClojureScript?
Hello! I started using exponent today and now i'm trying to use https://github.com/wix/react-native-navigation in my exponent's project
The problem is that react-native-navigation requires you to start the root of your app in a different way:
index.ios.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens(); // this is where you register all of your app's screens
// start the app
Navigation.startTabBasedApp({
tabs: [
{
label: 'One',
screen: 'example.FirstTabScreen', // this is a registered name for a screen
icon: require('../img/one.png'),
selectedIcon: require('../img/one_selected.png'),
title: 'Screen One'
},
{
label: 'Two',
screen: 'example.SecondTabScreen',
icon: require('../img/two.png'),
selectedIcon: require('../img/two_selected.png'),
title: 'Screen Two'
}
]
});
And I noticed that exponent requires you to start your app with this special function:
Exponent.registerRootComponent(App);
That probably does a lot more than the normal one
Is it possible to use these two technologies together?
Hi,
I'm new to React Native and ExponentJS. I've started a new project like a charm (really excellent work!), but now I'm struggling with what can I do with it. I'm missing list of all GUI widgets, how to use router / navigation in the app, etc., etc.
I've googled a bit but didn't find anything useful. Do you have any up-to-date link to some tutorial?
I am trying to implement a facebook login flow that uses a long-lived token for server access. The server token will expire in 60 days after the initial exchange.
https://developers.facebook.com/docs/facebook-login/access-tokens/expiration-and-extension
The native SDKs provide a way to request a new short-lived token (which will be exchanged for a long lived on on the server) in the background with no user interaction.
From what I can tell, Exponent does not expose the necessary API calls into the facebook SDKs to accomplish this.
I believe the relevant API calls needing to be implemented would be:
Android:
refreshCurrentAccessTokenAsync
I think this is a completely necessary API call for anyone who wants integrate with Facebook for anything more than simply login.
As discussed with @brentvatne , there is a bug where Permissions.getAsync
for LOCATION always returns "denied" even if the permission is actually granted.
It seems to also lead to the issue where Permissions.askAsync
won't fire the dialog so that user can grant/not grant the permission.
I cannot do Hot Reloading on both iOS and Android devices at the same time. If I have hot reloading working on the Android, then in order for hot reloading to work on the iPhone, I first have to "Reload" manually on the iPhone. But then it turns off hot reloading on the Android. Then if I do a manual "Reload" on the Android to get hot reloading working again, it turns off hot reloading for the iPhone.
In Android, there is an option that we keep device on while usb connected.
Or, is there any workaround for this?
Hi! I'm trying to build a standalone app, but having trouble with configure
step of the process. Running:
gulp ios-shell-app --url MYURL --action configure --type archive --archivePath ../shellAppBase-archive/Exponent.xcarchive --sdkVersion 10.0.0
Getting the following error:
Modifying config files under /Users/andrey/hack/exapp/shellAppBase-archive/Exponent.xcarchive...
/Users/andrey/hack/exapp/shellAppBase-archive/Exponent.xcarchive/EXShell.plist: file does not exist or is not readable or is not a regular file (Error Domain=NSCocoaErrorDomain Code=260 "The file “EXShell.plist” couldn’t be opened because there is no such file." UserInfo={NSFilePath=/Users/andrey/hack/exapp/shellAppBase-archive/Exponent.xcarchive/EXShell.plist, NSUnderlyingError=0x7fdf57d00c70 {Error Domain=NSPOSIXErrorDomain Code=2 "No such file or directory"}})
[22:08:07] 'ios-shell-app' errored after 1.76 s
[22:08:07] Error: ENOENT: no such file or directory, open '/Users/andrey/hack/exapp/shellAppBase-archive/Exponent.xcarchive/EXShell.json'
at Error (native)
Same command works when I run in on shellAppBase-builds/simulator/Release/Exponent.app
, but how to make it work with archive I can submit to App Store?
Thank you!
I can load the exponent app on my iPad, but it appears to be in iPhone emulation mode on the small screen.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.