Loading local image in react native 0.60.3 and Xcode 11 - ios

Edited: only don't work in release
I use react native version 0.60.3. Before one year make an application with local images and it works well. I update Xcode to version 11 and old code and images work well also. I try to add new images for dark mode but the image doesn't show, there isn't an error, only blank space.
In code use images from js file like :
"url":require("../images/page1.png").
Images are added to copy bundle resources.
I try with command :
npx react-native bundle --entry-file='index.ios.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios
and copy assets and main.jsbundle to Xcode and get the same results, before I don't have assets folder in XCode, images are been in copy bundle resources.
Old images work (which are added before one year), new images don't work. Did I miss something? I don't have an error and don't know how to fix this issue.
My code:
<CustomImage
width={getImgWidth} height={getImgHeight}
lightpath={it.url}
darkpath={it.urldark}
darkmode={theme.darkmode} />
CustomImage.js
const CustomImage = (props) => {
return (
<View style={{ width: props.width, height: props.height }}>
{props.darkmode ? (
<Image
resizeMode="contain"
style={{ width: props.width, height: props.height }}
source={props.darkpath}
/>
) : (
<Image
resizeMode="contain"
style={{ width: props.width, height: props.height }}
source={props.lightpath}
/>
)}
</View>
);
};

Since props.darkpath = require("../images/page1.png")
Could you try:
<Image
resizeMode="contain"
style={{ width: props.width, height: props.height }}
source={`${props.darkpath}`}
/>

Related

iOS Keyboard autofill makes content jump/glitch when focusing on next TextInput

Description
I have a page in my app with two TextInput inside views covering the whole screen.
The two TextInput have a ref ref={refTextInput1}, ref={refTextInput2}.
They also have a onSubmitEditing onSubmitEditing={() => refTextInput2()}, onSubmitEditing={() => refTextInput1()}.
So, when I press "return" on the keyboard, the focus will switch to the desired input but it's also making the whole screen jump/glitch which is really annoying and not wanted.
The focus should switch to the desired input without making the whole screen jump/glitch.
I searched everywhere on StackOverflow and Github Issues but didn't find a lot of issues with this particular problem.
At first, I thought I had a problem similar to #30207, but after a while trying to find the problem, I think I found it.
The problem only occurs(I think) when Autofill Passwords is enabled in Settings>Passwords>Autofill Passwords.
If I disable Autofill Passwords, the jump/glitch does not occurs.
I also noticed that the keyboard event is always triggered twice on focus with Autofill Passwords enabled, and only once on focus with Autofill Passwords disabled. It may also be related. (See the console when running the snack example.)
I looked at other apps, and they all seems fine in the same type of login screen. Instagram for example doesn't have this problem.
It might also be the way I made my screen, if there's a better way to do the same or similar screen, I would be open to suggestions.
React Native version:
System:
OS: macOS 11.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU # 2.20GHz
Memory: 137.61 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.0 - /usr/local/bin/node
Yarn: Not Found
npm: 6.14.13 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 22, 23, 24, 25, 26, 27, 28, 29, 30
Build Tools: 28.0.3, 29.0.2, 30.0.2
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.5/12E262 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_271 - /usr/bin/javac
npmPackages:
#react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.1 => 0.64.1
react-native-macos: Not Found
npmGlobalPackages:
*react-native*: Not Found
Steps To Reproduce
Make sure Autofill Passwords is enabled in Settings>Passwords>Autofill Passwords.
Have at least two TextInput with a view taking the whole screen space.
Focus on the next TextInput using "return" on the keyboard.
I also noticed that the keyboard event is always triggered twice on focus with Autofill Passwords enabled, and only once on focus with Autofill Passwords disabled. It may also be related. (See the console when running the snack example.)
Expected Results
When pressing "return" on the keyboard, the focus should switch to the desired input without making the whole screen jump/glitch. Like when Autofill Passwords is disabled in Settings>Passwords>Autofill Passwords.
Snack, code example, screenshot, or link to a repository:
Snack 1 is a simpler version of my issue.
Snack 1: simple-keyboard-autofill-issue
Snack 2 is closer to what I really have in my app.
Snack 2: my-app-keyboard-autofill-issue
Minimal code example: (from simple-keyboard-autofill-issue)
import React, { useState, useRef, useEffect } from 'react';
import { Text, View, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard, Platform, TextInput } from 'react-native';
export default function App() {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const refUsernameInput = useRef(null);
const refPasswordInput = useRef(null);
useEffect(() => {
Keyboard.addListener('keyboardWillShow', keyboardWillShow);
Keyboard.addListener('keyboardWillHide', keyboardWillHide);
s
// cleanup function
return () => {
Keyboard.removeListener('keyboardWillShow', keyboardWillShow);
Keyboard.removeListener('keyboardWillHide', keyboardWillHide);
};
}, []);
const keyboardWillShow = () => {
console.log('keyboardWillShow');
};
const keyboardWillHide = () => {
console.log('keyboardWillHide');
};
return (
<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flex: 1, justifyContent: 'space-around', paddingHorizontal: 20 }}>
<TextInput
blurOnSubmit={false}
keyboardType="email-address"
placeholder="Username or email"
textContentType="username" // iOS
onSubmitEditing={() => refPasswordInput.current.focus()}
onChangeText={setUsername}
value={username}
ref={refUsernameInput}
style={{
borderColor: '#000',
borderWidth: 0.5,
height: 45,
paddingHorizontal: 20,
marginBottom: 5,
}}
/>
<TextInput
blurOnSubmit={false}
keyboardType="default"
placeholder="Password"
secureTextEntry
textContentType="password" // iOS
onSubmitEditing={() => refUsernameInput.current.focus()}
onChangeText={setPassword}
value={password}
ref={refPasswordInput}
style={{
borderColor: '#000',
borderWidth: 0.5,
height: 45,
paddingHorizontal: 20,
}}
/>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
Here you can see the screen recording taken from an iPhone 11 Pro with iOS 14.6: (Note that secureTextEntry was temporarily disabled while screen recording, the problem is still present)
https://user-images.githubusercontent.com/64789082/121977389-e7363080-cd53-11eb-9a4c-e26fc364bd03.MP4

React Native thinks image is a module

This may seem like a duplicate but I've followed the answers to maybe a dozen similar questions on Stack and none of the solutions are working for me.
The React Native docs say load to local images like so:
<Image source={require('./my-icon.png')} />
I've placed the image 3D-home2#x.jpg in the same folder as the JS file:
I also tried placing it at the project root:
I also tried placing it in Images.xcassets and loading it like require('image!3D-home').
In between these efforts, I cleared the module cache several times with yarn start -- --reset-cache. Did a full XCode project 'clean' several times and rebuilt the app. No matter what I do I get some variation of this error (project name redacted):
What am I doing wrong here? It seems like I'm following the instructions exactly but I cannot get an image to load.
<Image
style={{
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
left: 0,
zIndex: 10
}}
source={ require('./3D-home#2x.jpg') }
/>
The solution was to remove #2x from the file name. This is because React Native offers the ability to automatically swap out images using suffixes, so I was unwittingly trying to do that incorrectly or something:
You can also use the #2x and #3x suffixes to provide images for
different screen densities.
https://facebook.github.io/react-native/docs/images.html

Is it possible to link to external images / videos with React-VR?

According to the documentation, there doesn't seem to be any examples of using external images or external videos (i.e. from YouTube).
I was wondering if anyone knew if it was possible (like this)
<Video style={{
width: 3.0,
height:2.0,
transform: [{translate: [0, 4, 5]}, {rotateY : 180} ],
}} source={{uri: 'https://www.youtube.com/watch?v=vPCoxAlfFsw'}} />
MediaPlayerState in react vr home page

"outline" is not a valid style property

I am trying to reuse some components built for web application using reactjswith radium.
I have a component which contains outline css property . I reuse the component , unfortunalty , i got this error :
My questions are :
What is the alternative of outline property in react-native for both ios or android ?
Is there alternative of radium in react-native ?
Should I manage manually this difference of style properties naming among iOs DEV, android DEV as well as web DEV ?
I think you are looking for the border styles.
More specifically from the facebook react native docs:
borderWidth ReactPropTypes.number
borderStyle ReactPropTypes.oneOf(['solid', 'dotted', 'dashed'])
So for instance if you wanted to make a 10 x 10 box with dashed lines...
<View style={{ borderWidth:1, borderStyle: 'dashed', width: 10, height: 10, }} />

React Native iOS read image from apps Documents folder

I have to download images to my iOS apps local file system and read them back.
On my simulator I can see file system of my app with directories
/Library/Developer/CoreSimulator/Devices/[UUID]/data/Containers/Data/Application/[UUID]/
/Documents
/Library
/tmp
To try out I copied foo.png to /Documents folder and then tried
<Image source={{uri: "file://Documents/foo.png"}} style={{width:100, height:100}}/>
This does not work, any idea whats a way to do this.
This also took me ages... with better info it would have been 5 minutes!
I use react-native-fs to get directories (which works for ios and android):
var RNFS = require('react-native-fs');
RNFS.DocumentDirectoryPath then returns something like '/var/mobile/Containers/Data/Application/15AC1CC6-8CFF-48F0-AFFD-949368383ACB/Documents' on iOS
My Image element looks like:
<Image
style={{width:100, height:100}}
source={{uri: 'file://' + RNFS.DocumentDirectoryPath + '/myAwesomeSubDir/my.png', scale:1}}
/>
My problem was that I did not set width and height first, which is not needed for urls or paths to assets. When using a base64 uri the width and height are also mandatory (that actually led me to the solution!).
Try tilda (~). React Native should expand that.
<Image
style={{width:100, height:100}}
source={{uri: '~/Documents/myAwesomeSubDir/my.png', scale:1}}
/>

Resources