Advance, sorry if my english is not the best.
I've not been working on React Native for a very long time and now I have to implement an app with it. I currently use:
Android Studio 3.3
Android 9.0 Api 28
React Native 0.57.8
React Router 4.3.1
React Router Native 4.3.0
React Router Navigation 2.0.0-alpha.10
By the time I added the router, the styles worked like backgroundColor. Since then, the background of the app is only white and no matter which component I can't e.g. do represent a border when I use a view.
Have I might have missed something?
I have already tested the View element at every point. Same result. As I said, before I used React Router, it worked. With the integration of React Native Paper and Redux, there were no problems. I also tried customizing the styles.xml. Although this does work for permanently changing the background color, that's why I still can not put Border in any component. I also tried "component" instead of "render" in the Card component. And also with its own layout component.
App.js
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Provider as StoreProvider } from 'react-redux'
import { createStore } from 'redux'
import reducers from './reducers'
import { NativeRouter } from 'react-router-native'
import { Navigation, Card } from 'react-router-navigation'
import { Provider as PaperProvider } from 'react-native-paper'
import theme from './assets/js/theme'
import { Login } from './components/Views'
const appStyles = StyleSheet.create({
root: {
backgroundColor: theme.colors.background
}
})
export default App = () => {
return (
<View styles={ appStyles.root }>
<StoreProvider store={createStore(reducers)}>
<PaperProvider theme={theme}>
<NativeRouter>
<Navigation hideNavBar>
<Card
exact
path="/"
render={() => <Login/>}
/>
</Navigation>
</NativeRouter>
</PaperProvider>
</StoreProvider>
</View>
)
}
part of Login.js
const loginStyles = StyleSheet.create({
login: {
width: 400,
height: 400,
borderWidth: 4,
borderColor: theme.colors.error,
borderRadius: 3,
padding: 20,
justifyContent: 'center'
}
})
class Login extends Component {
render() {
console.log('LOGIN')
return (
<View styles={loginStyles.login}>
<Text style={{ color: theme.colors.error, alignSelf: 'center' }}>Test</Text>
</View>
)
}
}
None of it worked. Thanks for help.
I solved it myself. I am now using React Native Router Flux. I am still learning and trying out.
Related
I'm trying to add a tooltip component to my react native project, I installed React Native Elements to do this. I know it's installed correctly because the Divider component worked perfectly fine. For some reason though, the tooltip doesn't seem to work right, there are no errors but it simply doesn't do anything when I tap on the tooltip.
My entire component is here:
import React from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
} from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { Tooltip, Text } from "#rneui/themed";
import {Colors} from './Colors';
const InfoTooltip = ({ label, info='' }) => {
return (
<View style={styles.inputLine}>
{ info != '' &&
<Tooltip popover={<Text>Tooltip Info</Text>}>
<Text>Press</Text>
</Tooltip>
}
{ info === '' &&
<Text style={styles.inputLabel}>{label}:</Text>
}
</View>
);
};
const styles = StyleSheet.create({
inputLine: {
flex: 1,
flexDirection: 'row',
},
inputLabel: {
color: Colors.Dove_Gray,
marginTop: 2,
fontSize: 14,
},
infoText: {
color: Colors.Silver,
fontSize: 12,
},
});
export default InfoTooltip;
I'm testing it on iOS and I see the text that says "Press", but when tapped, nothing happens, no popover, no error.
When setting visible to true, the tooltip is shown when I first render the app, but it locks the app up and I can no longer tap anything or scroll.
I'm not sure what I'm doing wrong, Thanks!
Starting with React Native Elements version 4.0, Tooltip is stateless. This means you need to use useState. You should declare a variable, like:
const [open, setOpen] = useState(false);
And include visible, onOpen & onClose Props for it to work:
<Tooltip
visible={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
popover="This is the popover text"
/>
More info in the Migration Guide.
I am using react-native-gesture-handler and react-native-reanimated package to animate a View in react native. The scale of the view should increase on tap and the backgroundColor should change to red on tap. Everything works fine when I launch the app on the web but on android I
get no feedback. I used snack to text my code on my device and that worked on my android device but when I run the project with expo-start on my laptop the gesture handling doesn't work at all. Any help will be much appreciated 🙏🙏🙏🙏. The project is expo managed.
I am using react-native-reanimated version "~2.3.1", react-native-gesture-handler version "2.1.0";
//MY APP.JS FILE
import "react-native-gesture-handler";
import { StyleSheet, Text, View } from "react-native";
import Animated,{useAnimatedGestureHandler, useAnimatedStyle, useSharedValue} from "react-native-reanimated";
import { TapGestureHandler } from "react-native-gesture-handler";
export default function App() {
const pressed= useSharedValue(false);
const gestureEvent= useAnimatedGestureHandler({
onStart:()=>{
pressed.value=true
},
onActive:(e)=>{
pressed.value=true;
},
onEnd:()=>{
pressed.value=false;
}
});
const animationStyle=useAnimatedStyle(()=>{
return {
transform:[{scale:pressed.value?1.3:1}],
backgroundColor:pressed.value?"red":"yellow"
}
})
return (
<View style={styles.container}>
<TapGestureHandler onGestureEvent={gestureEvent} >
<Animated.View style={[styles.view,animationStyle]}></Animated.View>
</TapGestureHandler>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
view:{
backgroundColor:"blue",
width:100,
height:100,
borderRadius:20,
}
});
// BABEL CONFIG.JS
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
};
The scale of the view should increase on tap and the backgroundColor should change to red on tap. Everything works fine when I launch the app on the web but on android I
get no feedback. I used snack to text my code on my device and that worked on my android device but when I run the project with expo-start on my laptop the gesture handling doesn't work at all.
Is <GestureHandlerRootView> somewhere in your hierarchy? I've noticed this is not required in iOS, but is in Android. See their Docs.
Wrap your entire app with
<GestureHandlerRootView style={{flex: 1}}>
</GestureHandlerRootView>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
The Flex: 1 is important, without it your app won't be able to detect gestures on android.
I made expo initial app
My code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import NfcManager, {NfcEvents} from 'react-native-nfc-manager';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
When I trying to import NFC manager Im getting error: Native module cannot be null
screenshot
Google said that its error with IOS notifications, Im coding from windows VScode and cannot link push notifications, how I can solve this error? I cannot code without expo because this is only one way to simulate my app from windows on iphone as I understand
I solve it: expo not allowing additional libraries
I am trying to learn the basics of react native and have started with the basic tab template. I am trying to create a social media sharing screen, where you get the list of apps and airdrop on iOS to display but unfortunately this is not working. The code I have displays an empty view and I was expecting the share dialog to appear over the top. I get the view but no sharing options.
Here is the code
`
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Share } from 'react-native';
var ActionSheetIOS = React;
export default class ShareScreen extends React.Component {
static navigationOptions = {
title: 'Share',
};
showShareActionSheet() {
ActionSheetIOS.showShareActionSheetWithOptions({
url: 'https://www.someurl.org',
});
}
render() {
return (
<View style={styles.container}>
this.showShareActionSheet();
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#000000',
},
});
`
any ideas why this isn't working?
You need to wrap your this.showShareActionSheet(); with brackets to get it working.
<View style={styles.container}>
{this.showShareActionSheet()}
</View>
Otherwise it's gonna be considered as plain text and not as an instruction
You can use this package https://www.npmjs.com/package/react-native-share for sharing, This package will help you share the content to WhatsApp, FB, and other social apps.
I am working with react native, and I am using a video component from the expo. during this how I can change the value for URI attribute dynamically
(As you mentioned in the comment that you already solved the problem and want to play youtube videos)
You can use WebView to play Youtube video.
Working demo: https://snack.expo.io/Syhzx-VvX
Here is the sample code:
import React, { Component } from 'react';
import { StyleSheet, View, WebView, Platform } from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{ height: 300 }}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/YE7VzlLtp-4' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
WebViewContainer: {
marginTop: (Platform.OS == 'android') ? 20 : 0,
}
});
Otherwise if you don't want to use WebView, use a third party package like react-native-youtube