version:
"dependencies": {
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "0.55.2",
"react-native-elements": "^0.19.1",
"react-navigation": "^1.5.11",
"react-navigation-redux-helpers": "^1.0.5",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0"
},
After using the latest version of react-navigation with redux, i get the message:
'Warning: isMounted(...) is deprecated in plain JavaScript React classes. Instead, make sure to clean up subscriptions and pending requests in componentWillUnmount to prevent memory leaks.'
I didn't use isMounted in my code.
I don't know why this happen.
I haven't get this message before.
Need some help, please.
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import PropTypes from 'prop-types';
import {View, Text, Button} from 'react-native';
import {handleNav} from '../../actions/navAction';
import styles from '../styles/styles';
const Login = ({handleNav}) => (
<View style={styles.container}>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Text>Login Page</Text>
<Button
title = {'Login Button'}
onPress = {handleNav.bind(null, 'MAIN')}
/>
<Button
title={'go to register page'}
onPress={handleNav.bind(null, 'REGISTER')}
/>
</View>
);
Login.propTypes = {
handleNav:PropTypes.func,
};
const mapDispatchToProps = dispatch => bindActionCreators({handleNav},dispatch);
export default connect(null, mapDispatchToProps)(Login);
Indeed, its react-navigation issue (https://github.com/react-navigation/react-navigation/issues/3956),
still the next release, you can solve the issue using below:
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated']);
Library that you use have this dependency.
try update deprecated packages :
npm outdated - (will show you all packages that can be updated)
if all packages updated : Wait for new version or go back to :
"react": "16.3.0-rc.0",
"react-native": "0.54.3",
Related
I am using:
"expo": "~47.0.12",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"softwareKeyboardLayoutMode": "resize",
I have tried KeyboardAvoidingView and KeyboardAwareScrollView but it still not working.
<KeyboardAvoidingView enabled={true} behavior="padding" style={{ flex: 1 }} >
<View style={signupStyles.container} >
<SignUpheader />
<InputArea />
<PasswordInput />
<View/>
</KeyboardAvoidingView>
Before
After
I want it to be like this but without using "softwareKeyboardLayoutMode": "pan" as it creating problem in another screen
I developing my app with Expo and NativeBase.
Now this time, I would like you to help me with this weird Style problem.
Environment
"dependencies": {
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.1",
"babel-plugin-dotenv-import": "^2.2.0",
"expo": "~44.0.0",
"expo-location": "~14.0.1",
"expo-permissions": "~13.1.0",
"expo-status-bar": "~1.2.0",
"native-base": "^3.3.11",
"prettier": "^2.6.2",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-maps": "0.29.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "12.1.1",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0",
"tailwindcss": "^3.0.23"
},
Example
As I wrote above, Style dose not work stably for any reasons and it's the problem.
I will show you my example.
Expected Style
This picture is my expected view in this case.
What I want do is placing the white box that has texts and buttons inside on the center of the MapView.
Actual Style
This picture is the weird problem.
Style works well and is displayed like the above picture sometimes, but the other times, like the below picture, it does not work.
The weird thing is that every time I reload the app without editing my code, Style's appearance sometimes changes. This is the meaning of "Style does not work stably".
NOTE: This picture looks different a bit from the above picture like the button color. Please don't care about details because this is just a developing view.
What I did for fixing the problem
Clear cache and reload the app
Stop using my custom theme
These does not fix the problem.
code
Here is my code.
WordBox is called by HomePresenter.
When onPress is emitted, WordBox shows.
I'm not familiar with React Native and Expo very much, so I first faced this problem and am really troubled.
My explanation must be complex because I am not used to use English, but if it is alright with you, please tell me how to fix it.
Thank you.
export const WordBox = (isShow: boolean): JSX.Element | null => {
if (!isShow) {
return null
} else {
return (
<View width="full" height="full">
<Center width="full" height="full">
<Box
width={sizes.Box.width}
height={sizes.Box.height}
backgroundColor={colors.Base.White}
borderRadius="3xl"
shadow="7"
>
<Text mt="4" fontSize="3xl" fontWeight="bold" textAlign="center">
Set a new marker here?
</Text>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
Yes
</Button>
<Button
fontWeight="bold"
fontSize="2xl"
borderRadius="3xl"
width="28"
height="10"
>
No
</Button>
</Box>
</Center>
</View>
)
}
}
Additional Information(Without NativeBase code)
I styled my app again without NativeBase following great Abe's advise.
This issue still happens.
The minor appearance is different from above pictures a bit, but the view changes when reloading my app or rerunning it like these two pictures because Style doesn't work well.
Here is my code without using NativeBase but using tailwind-rn instead.
export const WordBox = (isShow: boolean): JSX.Element | null => {
const tailwind = useTailwind()
return (
<View style={tailwind('m-auto bg-white rounded-3xl h-1/6 w-10/12')}>
<Text style={tailwind('mt-2 text-2xl font-bold text-center')}>
Set a marker here?
</Text>
<View style={tailwind('mt-4 gap-x-2 flex-row justify-center')}>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>Yes</Text>
</Pressable>
<Pressable style={tailwind('rounded-3xl w-7 h-2.5 bg-emerald-600')}>
<Text style={tailwind('font-bold text-base')}>No</Text>
</Pressable>
</View>
</View>
)
}
Additional Information(Where WordBox is called)
WordBox is called inside MapView component which is wrapped by HomePresenter.
newmarker is called when I press on the screen, so new marker is not related to this problem, I think.
export const HomePresenter: FC<HomeProps> = ({
loading,
location,
newMarker,
showAddModal,
onPress,
}) => {
const tailwind = useTailwind()
return (
<View>
{loading ? (
<View style={tailwind('text-center justify-center')}>
<Text style={tailwind('font-bold text-2xl')}>Loading</Text>
</View>
) : (
<>
<MapView
key="mapview"
provider={PROVIDER_GOOGLE}
showsUserLocation={true}
showsMyLocationButton={true}
style={tailwind('h-full w-full')}
region={location}
onPress={(e: MapEvent) => {
onPress(e)
}}
>
{newMarker && newMarker}
<WordBox /> // WordBox is called HERE
</MapView>
</>
)}
</View>
)
// }
}
I resolved this problem thanks to #Abe.
The source of this issue is placing Modal inside MapView component.
I should've placed my modal underneath MapView. In fact, this is written in the react-native-maps Docs
I hope those who use react-native-maps do not make the same mistakes.
i need to show svg files and find react-native-remote-svg package. but i cant find it and not sure how to solve it anyone can help about that?
there is the warning
import {View, Text} from 'react-native';
import Image from 'react-native-remote-svg';
const App = () => {
return (
<View>
<Image
source={{
uri:
'https://example.com/my-https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svgpic.svg',
}}
style={{width: 200, height: 532}}
/>
</View>
);
};
export default App; ```
Use this react native library
https://github.com/vault-development/react-native-svg-uri
it depends on the react-native-svg library so you need both
For rendering remote SVG images better way is using https://github.com/react-native-svg/react-native-svg.
For your case:
import * as React from 'react';
import { SvgUri } from 'react-native-svg';
export default () => (
<SvgUri
width="200"
height="532"
uri="https://example.com/my-https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svgpic.svg"
/>
);
Used versions:
"expo": "^36.0.2",
"react": "16.9.0",
"react-dom": "^16.8.6",
"react-native": "0.61.4",
"react-native-web": "0.11.7",
"react-native-webview": "^8.1.2"
Used React Native code:
<WebView
source={{uri: 'https://www.somedomain.com/'}}
style={{marginTop: 22, flex: 1}}
injectedJavaScript={this.state.contentScript}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={this.receiveMessage}
ref={this.props.webview}
/>
Only a red border is present on the web version meanwhile on the Android it loads fine.
No errors present. Could this be a known issue? But I can't find it reported anywhere.
Currently WebView is not supported by expo-web. Check Platform Compatibility for more information.
But if you want to load your WebView inside expo-web, place it inside iframe as below,
import * as React from "react";
import { View, Platform } from "react-native";
import { WebView } from "react-native-webview";
export default class App extends React.Component {
render() {
return Platform.OS === "web" ? (
<iframe src="https://www.somedomain.com/" height={'100%'} width={'100%'} />
) : (
<View style={{ flex: 1 }}>
<WebView
source={{ uri: "https://www.somedomain.com/" }}
style={{marginTop: 22, flex: 1}}
/>
</View>
)
}
}
Hope this helps you. Feel free for doubts.
Hi I am trying to use video with React Native and came across Expo Video Component (see https://docs.expo.io/versions/v14.0.0/sdk/video.html) and as I am using create-react-native-app to setup my app I thought this would be a good option. However when I add "useNativeControl to my video component it causes my app to crash.
Here is some code with useNativeControl: //displays just the controls for a second and then says "Expo has stopped" before exiting app
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { Video } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.app}>
<Video source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }} rate={1.0} volume={1.0} useNativeControls muted={false} resizeMode="cover" shouldPlay isLooping style={{ width: 300, height: 300 }} />
</View>
);
}
}
Here is the code without it:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import { Video } from 'expo';
export default class App extends Component {
render() {
return (
<View style={styles.app}>
<Header />
<Topics />
<Video source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }} rate={1.0} volume={1.0} muted={false} resizeMode="cover" shouldPlay isLooping style={{ width: 300, height: 300 }} />
</View>
);
}
so as you can see the only difference is the "useNativeControls", without usenativecontrols the app works fine, I just don't have any controls on the video.
Main Question: How can I use native controls and not have my app crash?
Side Note/Question:
Alternatively, is there another video player that is simple to use for beginners of react-native? I have spent a few hours on this but haven't come up with a solution yet. I originally tried react-native-video (https://www.npmjs.com/package/react-native-video), but this did not work for me (and judging from the docs it requires you to make changes to java code which is not something I am looking to do). So if there is an alternative to expo's video component that has controls and works without any java/swift knowledge that is what I am looking for.
Edit:
package.json dependencies:
"dependencies": {
"expo": "^20.0.0",
"link": "^0.1.5",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.4",
"react-native-video": "^2.0.0",
}
Have you ejected/detached your app? That library needs some native code to be added to a project. You cannot use it with plug&play method. Read more about detaching here: https://docs.expo.io/versions/latest/guides/detach.html
Be warned though, it's wild world once you start building an app for yourself. I am there by myself right now and failing wonderfully. I doubt you can find any video player that would not require some native code to be added.