I am trying to develop a mobile-only social media app. I’m trying to decide the most optimal way to build it. My target audience, teenagers, have mostly iPhones - 70-80 percent of them. I was thinking, then, to just create it using Xcode and Swift, rather than using a hybrid app platform.
Any advice would be helpful!
Stay safe
I hope everyone is safe during these times. I have been working on React-Native for quite some time now and I still seem to be facing issues with the launch and splash screen.
As per my requirements I need to have a launch screen and then a splash screen, the behavior is that if you haven't opened the app yet on your phone it will show you the launch screen and then the splash screen (two separate assets).
I have built two assets with the same dimensions and have used a package called react-native-splash-screen to achieve this behavior but even with the same dimensions for the assets my launch screen and splash screen end up rendering differently.
The package uses .xib files for iOS and I feel like Storyboard would be a better fit for this use case, but even when using storyboard I am having trouble making my asset scale across devices (it could be good for iPhone 11 but not good with iPhone 8 for example), I did use constraints but to be honest even after trying many times I can't seem to get it perfect.
I know launch screens and splash screens are in most apps out there today, but can someone help me or point me in the right direction to implement this with the best practices especially with React-Native?
Thank you very much.
I am currently in the process of meeting Apple's updated developer guidelines for a React Native mobile app. The hangup for me has been with using a storyboard for the launch screen.
Overview
The production version of the app is using react-native-splash-screen to handle the splash screen, which is just the company logo. I noticed that the package last had an update published a year ago, so I would like to get away from it and handle the splash screen natively.
Current State
I created a storyboard with Xcode and dropped the package from the repo. I made a few changes to AppDelegate.m, and I was able to display the splash screen for a set period of time. I ultimately don't want to use a timer, I want to hide the splash screen once all of the launch time network calls are finished.
Solution (?)
After combing through articles and posts, I came across what I think is the solution. It was a post on r/reactnative from a couple years back: https://www.reddit.com/r/reactnative/comments/754y5g/app_flashing_white_after_launch_screen_on_ios_11/
The OP had found a solution and added it in a comment. The idea is to edit the AppDelegate.m provided by RN to replace the white screen with the same .xib as the launch screen.
I have a .storyboard and not an .xib
Their example has a slightly different AppDelegate.m than the app's.
I don't know a lick of Objective-C
So, my search continued and I found the following post from stackoverflow: React-Native iOS - How to show a view controller after Launch screen, before initialising react native bridge (iOS)
I refactored based on this post and was able to get to my current state.
Code
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{ UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"LaunchScreen" bundle:[NSBundle mainBundle]]; UIViewController *backgroundView = [storyboard instantiateViewControllerWithIdentifier:@"LaunchViewController"]; RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"fakeAppName" initialProperties:nil]; rootView.backgroundColor = [UIColor clearColor];// changed color to clearColor UIViewController *rootViewController = [UIViewController new]; rootViewController.view = rootView; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.rootViewController = backgroundView; [self.window makeKeyAndVisible]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(3 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ self.window.rootViewController = rootViewController; }); return YES;}Question
How can I display a splash screen after the launch screen storyboard to cover the time between tapping the app icon and the completion of the loading of the app?
Additionally, I want splash screen and launch screen to be the same storyboard so that it is a seamless transition from loading to the home screen.
As I said, I don't know Objective-C and have been at a bit of a loss with debugging this. Can anyone offer suggestions or point me to resources that could help me out here?
Self Defense
I used alternating terminology of splash screen and launch screen because Apple identifies them as 2 different things. As I understand it, launch screen is for OS loading of the app and splash screen is for initial in-app loading.
I have also seen quite a few strong opinions on splash screens. The app has initial network calls that require a short loading period, thus I use a splash screen to cover that loading. I are not using it just for the sake of having the logo in your face for longer.
I am familiar with another RN package called react-native-bootsplash. I am trying to avoid using a package all together, which is why I am pursuing this solution in the first place.
I am using React Native and having styling problems with an imported tag, QRCodeScanner. I do not know how to style the background around it and the scanner itself. Where do I change the backgroundColor, how do I make the scanner smaller, and how do I change the position of the scanner?
Here is my code:
'use strict';import React, { Component } from 'react';import { View, AppRegistry, StyleSheet, Text, TouchableOpacity, Linking} from 'react-native';import QRCodeScanner from 'react-native-qrcode-scanner';import { RNCamera as Camera } from 'react-native-camera';class ScanScreen extends Component { onSuccess = e => { Linking.openURL(e.data).catch(err => console.error('An error occured', err) ); }; render() { const {navigate} = this.props.navigation; return (<View style={styles.background}><QRCodeScanner onRead={this.onSuccess} flashMode={Camera.Constants.FlashMode.torch} topContent={<Text></Text> } bottomContent={<Text></Text> } /></View> ); }}const styles = StyleSheet.create({ centerText: { flex: 1, fontSize: 18, padding: 32, color: '#000000' }, textBold: { fontWeight: '500', color: '#000' }, buttonText: { fontSize: 21, color: 'rgb(0,122,255)' }, buttonTouchable: { padding: 16 }, background: { backgroundColor: "#5c9dff", // marginBottom: 100 }});export default ScanScreen;And this is the simulator from React Native:
Thanks.
Building my React Native app in Xcode 11.3.1 gives me the error:
"React/RCTBridgeDelegate.h" file not found in AppDelegate.h
only when building an additional target (Release Scheme) directly in Xcode. When building the standard development target, I have no problems.
More detailed:I have a React Native app with a Watch companion app. The app is equipped with different additional React Native modules. The app runs smoothly when building it in the standard build target (Development scheme) via React Native cli (react-native run-ios) as well as when building the standard build target (Development scheme) directly in Xcode.Already a while ago, I have created a duplicate set of targets in Xcode (Release scheme). Building the duplicate target for the iOS app in Xcode bundles the React Native code and images as an additional build phase to be able to deploy the app on an iPhone not depending on the development server. Building this target worked out smoothly as well for a long time.
Now all of a sudden since some days when I want to build my duplicate target (Release scheme) in Xcode I am getting the error
I can still build the standard build target (Development scheme) via console react-native run-ios and also directly in Xcode with no problems. I not sure what caused this issue now, the only change to my config I have made some days ago is that I have added some additional modules to my React Native app, e.g. react-native-keychain and react-native-push-notification. Both have been configured correctly as I would assume, also pods have been installed as necessary and I can see that those modules also work well when building the development target, so I don't think that adding those additional modules caused the issue.
I have read all issues on StackOverflow describing this problem and have already tried all of the following solution proposals with no effect unfortunately:
HEADER_SEARCH_PATHS build setting"I am stuck and would really appreciate your help - do you have further ideas on what I can try out to solve this annoying problem?
I have Flatlist and TextInput as a search bar on ListHeaderComponent.When i filled the TextInput and clicked the item of flatlist (using TouchableOpacity), there is only a keyboard dismiss action, it needs to click the second time to be able to select items from the flatlist
any solution?
We're in the process of publishing our app but coming across an issue with Google OAuth consent screen displaying "This app isn't verified" (we're currently testing on iOS). However it only appears for SOME users. I'm sure all users are using the same build from TestFlight.
The was developed using React Native and uses @react-native-community/google-signin:v3.0.2 for Google OAuth. What could be the reason for this issue to only be happening for some users and not others? It's really difficult to troubleshoot if I'm unable to reproduce on my device. Are there any cache or settings that need to be reset in order for this to appear again? Any leads would be appreciated.
Thank you
Is JavaScript not vulnerable to security? I am trying to create an app using react-native, but I am wondering how to handle security key cases.
Also, can I get the key value stored in xcode from react-native?
I have a "animation" with Mapbox, which draws a polyline on the map. I want to share this "drawing animation"/the screen with e.g. Instagram or even just create a video from this animation in general to pass it to social sharing libraries...
Do you know, how it´s possible to create a "video" from the screen/the animation (made with setInterval). I have been looking around for a longer time now, but haven´t found anything, yet. I can take a screenshot, but this won´t include the animation...Thank you for your elp
im new in react native and i try to passing data from my login class to a auth function but it dont work.
This is my Auth function
function auth(username, password) {fetch('http://192.168.178.26:8000/auth/', { method: 'POST', headers: {'Content-Type': 'application/json', }, body: JSON.stringify({ username, password })}) .then(res => res.json()) .then(res => { saveToken(res.token); console.log(res.token); props.navigation.navigate('Home'); }) .catch(error => console.log(error));Constructor
constructor() { super() this.state = { isReady: false, username: '', password: '', } this.auth = auth(this.state.username, this.state.password)...more code render() { const {password} = this.state.password; const {username} = this.state.username;My Text Inputs and the login button
<TextInput placeholder='Email' ... value={username}/><TextInput placeholder='Password' ... value={password}/><TapGestureHandler><Animated.View style={style.button} ><Text style={{ ... onPress={this.auth}>Anmelden</Text>I work on this for days now and googled hours but i cant find a solution. Can you please help me?
Best regards.
const viewableWindowHeight = Dimensions.get('window').height - Header.HEIGHT - ???
How do I get the TabBar height?What if the iPhone is X? How can I take that into account?
Problem: I am trying to make a link accessible on both Android and iOS using React Native. iOS has a rotor when using VoiceOver that has an option to switch between links on the screen which does not work for the following element:
<Text>Here is some text <Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link</Text></Text> The same thing happens on Android when using the Links option to search for links on-screen with TalkBack on. In the above code sample, double-tapping in Android does not open the link when TalkBack is on but in iOS double-tapping the sentence with VoiceOver on does open the link.
Things I've Tried: I have tried splitting the Text elements like this:
<View><Text> Here is some text</Text><Text accessible={true} accessibilityRole="link" onPress={() => Linking.openURL("https://www.google.com")}> Here is a link </Text></View>This does fix the issue on Android with me being able to double-tap the link and it opens the webpage and it will also allow me to flick to it as a link when I have the links option on for TalkBack, but this is not an optimal strategy because it messes with the format of my sentence for sighted users. This also does not add the link item to the iOS rotor. Given that this is an accessibility problem I have not found a lot of resources on how to fix this issue.
Conclusion: I want to be able to click the link while it is in the nested Text element on Android and I want the links control on TalkBack to work. I would also like to add the links option to the rotor on iOS. For those unfamiliar with the iOS accessibility rotor here is a link to information on iOS accessibility rotorHere is a link for the local/global context menu for accessibility on Android. Any advice on this would be greatly appreciated.
I'm following this guide for setting up OneSignal with React Native, and in the section where you create a notification service extension, it says "Unless you have a specific reason not to, you should set the Deployment Target to be iOS 10.". The default deployment target is 13.2. I'm wondering whether this article is just outdated and I should set it to 13.2, or if there's actually a reason for me to set it to 10?
When I run the build for my iOS project it throws a logic error: The left expression of the compound assignment is an uninitialized value. The computed value will also be garbage.
This is being thrown in the Yoga package that can be found here.
I checked out different Stack Overflow and Github threads but I couldn't find anyone with the same issue.
(performLayout ? layoutMarkerData.cachedLayouts : layoutMarkerData.cachedMeasures) += 1;This should build without this error.
I stuck with a problem with Xcode. I upgraded one package for my react-native project (react-native-track-player@2.0.0-rc13) and after that when I tried to build the project, it does have problems with some headers in the "react-native-maps@0.26.1" package. It shows this error:
'AIRMapCoordinate.h' file not foundI realized that this error happening because Xcode can't find those headers and those headers are in this directory:$(SRCROOT)/../node_modules/react-native-maps/lib/ios/AirMaps
So I added this path to "Header search paths" but it still can't find those headers. I also delete pods and re-install them and cleaned the project build folder but I still have the same problem.Do you have any ideas about what goes wrong here?
Classic case of it works on my machine. I am building two react-native apps. App A and App B. Both of the applications were bootstrapped using expo.
When I run the command to build either app locally expo build:ios they both build. Yet when I attempt to build the applications in gitlab-ci only application B fails to build with the following message:
[23:07:28] warn Package babel-preset-expo has been ignored because it contains invalid configuration. Reason: Cannot find module 'babel-preset-expo/package.json'[23:07:28] Require stack:[23:07:28] - /builds/XXX/application-b/node_modules/react-native/node_modules/@react-native-community/cli/build/tools/config/resolveNodeModuleDir.js[23:07:28] - /builds/XXX/application-b/node_modules/react-native/node_modules/@react-native-community/cli/build/tools/releaseChecker/index.js[23:07:28] - /builds/XXX/application-b/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/server/runServer.js[23:07:28] - /builds/XXX/application-b/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/server/server.js[23:07:28] - /builds/XXX/application-b/node_modules/react-native/node_modules/@react-native-community/cli/build/commands/index.js[23:07:28] - /builds/XXX/application-b/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js[23:07:28] - /builds/XXX/application-b/node_modules/react-native/local-cli/cli.js[23:07:28] [23:07:29] Starting Metro Bundler on port 19001.[23:07:29] debug Watch mode is not supported in this environment[23:07:29] debug Checking for a newer version of React Native[23:07:29] debug Current version: 0.61.4[23:07:29] debug No release cache found[23:07:29] debug No release cache found[23:07:29] debug Checking for newer releases on GitHub[23:07:29] debug No release cache found[23:07:30] Publishing to channel 'default'...[23:07:30] debug Saving "6d6386b01438c6ef0acd213d304b5839" to cache[23:07:30] debug No release cache found[23:07:30] debug No release cache found[23:07:30] debug Latest release: 0.60.0[23:07:32] Building iOS bundle[23:07:43] node_modules/expo/AppEntry.js: Cannot find module 'babel-preset-expo' from '/builds/XXX/application-b'[23:07:43] › Closing Expo server[23:07:43] node_modules/expo/AppEntry.js: Cannot find module 'babel-preset-expo' from '/builds/XXX/application-b'[23:07:43] Failed building JavaScript bundle.[23:07:43] ::ffff:127.0.0.1 - - [06/Apr/2020:23:07:43 +0000] "GET /node_modules/expo/AppEntry.bundle?dev=false&minify=true&hot=false&platform=ios HTTP/1.1" 500 - "-""axios/0.19.0"[23:07:43] › Stopping Metro bundler[23:07:43] Packager URL http://127.0.0.1:19001/node_modules/expo/AppEntry.bundle?dev=false&minify=true&hot=false&platform=ios returned unexpected code 500. Please open your project in the Expo app and see if there are any errors. Also scroll up and make sure there were no errors or warnings when opening your project.I have tried having the CI explicitly install the module babel-preset-expo, but that does not fix the issue. My babel.config.js is identical for both apps and looks like this:
module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], };};I have the following lines in my both of my package.json:
"devDependencies": {"@babel/core": "^7.0.0","babel-preset-expo": "^8.0.0" },The file in both applications being referenced in the error AppEntry.js is identical as well.
Here is my gitlab-ci.yml:
image: node/alpinecache: key: ${CI_COMMIT_REF_SLUG} paths: - ~/.npmstages: - deploy - tagbefore_script: - echo $CI_BUILD_REF - echo $CI_PROJECT_DIR - apk add --no-cache bash build-base gcc git python3 curl - PATCH=`git log --pretty=oneline | wc -l | sed -e 's/^[[:space:]]*//'` - VERSION=`cat VERSION` - VERSION=${VERSION%?} - TAG="${VERSION}${PATCH}" - echo "Build version = ${TAG}"expo-build: stage: deploy artifacts: paths: - ipas/ script: - sed -i "s/0.0.0/${TAG}/g" app.json - npm ci --production --cache .npm --prefer-offline - npx expo login -u $EXPO_USERNAME -p $EXPO_PASSWORD - EXPO_DEBUG=true npx expo build:ios --non-interactive # This works because it has been already built once through the cli, credentials cannot be pass into env - mkdir -p ipas - curl "$(npx expo url:ipa --non-interactive)" -o ipas/bravo-teller-$TAG.ipa only: - masterAny feedback or suggestions as to what this could be would be greatly appreciated. Thanks
I was wondering if its possible to create an app which can be unlocked by a specific person and only, without being possible to get unlocked by another person.
I will try to describe my thoughts in more details.
The traditional security of applications nowadays happens with use of a username and password most of the times, but a person can give easily his credentials to another person in order to login. Biometrics can be used as security but in order to be safe, both android and ios store them in the device, which is very good in terms of safety. The problem is that a person can change biometrics in his device, for example someone can add his friend's fingerprint or face.
I want to create an app in which a person will add his biometrics as credentials the very first time and these biometrics will not be possible to change after that. Of course he will be able to delete them if he want.
The structure of biometrics right now is device-centric, a person can do whatever he wants in his device, and other people aswell with his permission. So I want to restrict the last part. I want to be sure that my app is used by a specific person and only by him.
Is it possible? What I thought is to create a private - public key when someone add biometric the very first time, with the public key stored in my database and the private in user's phone. The if someone change biometrics and private key have to change and the authentication for the app will fail.
Is it possible with android and IOS?
Thank you in advance.
I'm new to react-native and I need to build an app that can pair 2 devices via Bluetooth. For what I know, to connect 2 devices via Bluetooth, one has to be on central mode and another on peripheral mode. All the libraries that I found just had the central mode option (e.g. react-native-bluetooth-plx), and I can't find any tutorials or info about this topic. Can anyone here help me?
I have a problem. How can I open the application remotely when the application is closed? I want to do this for incoming calls (without Telecom). You can think like Telegram or Whatsapp. I developed the application with react native, I can do this when the application is open, but I cannot do it while it is closed. I am waiting for your help in this regard. Thanks in advance. Best regards
I am integrating react-native-maps and want coordinates of centre of screen everytime on call of onRegionChange or onRegionChangeComplete (It will show my marker remain fix at centre and my map is draggable and I will get location below my marker).I am not getting the way to do it.