I want to embed javascript code in a ReactNative Component without creating an entirely new component (a plugin I'm using doesn't allow the component to be used outside of it).
Something like this:
Home.js
render() {
<View>
embed('otherFile.js')
</View>
}
otherFile.js
<Text>Hello</Text>
Note: I know components can do this, but they won't work for this situation.
I need to embed the .js file as if it was manually put into the Home.js file
Is something like that possible in ReactNative?
You can use otherFile.js in home.js like this.
import otherFile from '/path upto otherFile/';
render() {
<View>
<otherFile/>
</View>
}
Related
I am using Linking from React-Native. Linking.OpenUrl seems to work with most urls but it does not seem to work with urls which have non-english characters. See the example below in Expo where I have reproduced the case. Note that if you click on the url link directly it will open properly. However, when the same link is being opened via the Linking.OpenUrl it does something to the url and lands in a 404 page.
Here is a repro in Expo:
https://snack.expo.dev/#rezahok/linking-not-working
I am using Expo 42. Any help with this would be really appreciated.
Try with below code
export default class App extends Component {
render() {
const uri = `https://www.prothomalo.com/bangladesh/district/%E0%A6%A6%E0%A6%BF%E0%A6%A8%E0%A6%BE%E0%A6%9C%E0%A6%AA%E0%A7%81%E0%A6%B0%E0%A7%87-%E0%A6%B0%E0%A7%87%E0%A6%B2%E0%A6%95%E0%A7%8D%E0%A6%B0%E0%A6%B8%E0%A6%BF%E0%A6%82%E0%A7%9F%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF%E0%A6%97%E0%A6%A4-%E0%A6%97%E0%A6%BE%E0%A7%9C%E0%A6%BF%E0%A6%95%E0%A7%87-%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%A7%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%95%E0%A6%BE-%E0%A6%A8%E0%A6%BF%E0%A6%B9%E0%A6%A4-%E0%A7%A9`
const decodedUri = decodeURIComponent(uri);
return (
<View style={styles.container}>
<Button title="Click me" onPress={ ()=>{ Linking.openURL(decodedUri)}} />
</View>
);
}
}
I need to show SVG icons inside my application, I did the entire process of installing the react-native-vector-icons library and configuring icomon. Also, I went to the icomon website and created my font files. But when I use it, the application renders an icon different from the one I should be reloaded by the file.
config icomon
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../../assets/customIcons/selection.json';
export default createIconSetFromIcoMoon(
icoMoonConfig,
);
icon that should be loaded.
icon being loaded
My code
export function ItemMenuDropdown({ item }) {
const navigation = useNavigation();
return (
<Container onPress={() => navigation.navigate(item.navigation)}>
<Content>
<CustomIcon name="pencil" size={normalize(18)} color="#F68B1F" />
<Text>{item.item}</Text>
</Content>
</Container>
)
I've looked for several solutions here on the site, but I haven't found one that works. Can someone help me?
I think the problem is in your selection.json file. It's either out of date or you're having some kind of cache problem. Maybe you want to try the same operation using this module.
react-icomoon
I am pretty new to react-native. Whenever i have to make use of SafeAreaView I have to make a seperate .android.js file for same component without safe area leading to duplication.
Is it possible to conditionally use SafeAreaView with platform.os?
Yes, It is possible to use SafeAreaView with Conditionally for Platform.OS.
SafeAreaView only applicable on ios, but also work on android.
On my code SafeAreaView work on both OS.
If there is a need only on a particular OS then give condition.
I have same problem. So what I done is that create one component called whatever you want eg. SafeScrollView.js and then render conditionally SafeAreaView in that component then pass children to that component.
For example :
I have SafeScrollView.js like below :
import React from 'react';
import { View, SafeAreaView, Platform } from 'react-native';
const SafeScrollView = (props) => {
if (Platform.OS === "ios") {
return (
<View style={props.style}>
{props.children}
</View>
);
}
return (
<SafeAreaView style={props.style}>
{props.children}
</SafeAreaView>
)
}
export default SafeScrollView
Then use SafeScrollView as a component like below :
<SafeScrollView>
// Your component
</SafeScrollView>
Now, In IOS it will render normal View component and if device is android it will render SafeScrollView.
So, you don't have to create separate file.
SafeAreaView only supports ios. So, you can use conditional statement to you this for particular os.
I have an openDrawer method via React Navigation 2 working great in my View. However, when I create a child component and place my openDrawer button in it, I can no longer access this.props.navigation. How do I pass that down into the child component? I looked at state but that doesn't seem to be the correct way to address this? I am new to React/Native. Here is my button inside the main view and it works fine this way.
<View style={styles.menuBar}>
<TouchableOpacity style={styles.menuButton}
onPress={() => this.props.navigation.openDrawer()}>
<Text>☰</Text>
</TouchableOpacity>
// Other Stuff inside menuBar.
</View>
This menu button has a few other items as well and I am wanting to group together in a class component as a child that I can just import into various screens.
import { topMenuBar } from '../components/menuBar';
<topMenuBar />
However, the menu button no longer works now. I know it's because this.props is now referring to class topMenuBar and not the original class which is part of the nav structure. But I don't know the proper procedure for this step, whether it's using state or calling NavigationActions from react-navigation in the child method somehow.
Thanks for the help!
Every component opened using react-navigation has "this.props.navigation".
If you need it in child components you should pass to them as a prop:
export default class Home extends Component{
render(){
<View>
<OtherComponent navigation = {this.props.navigation}/>
</View>
}
}
Note: if you want a better help you should always provide code creating a fiddle and organize better your answers..
I want to turn this section of code into a reusable component so I don't have to write the same thing out 5 times.
<TouchableOpacity onPress={console.log('pressed')}>
<Image
source={require('../img/button_australia.png')}
/>
</TouchableOpacity>
The new component I made to mirror this is as follows:
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButton = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={require(img)}
/>
</TouchableOpacity>
);
};
export { ImgButton };
After importing this component ImgButton I call it with this block of code:
<ImgButton
onPress={console.log("pressed")}
img={'../img/button_australia.png'}
/>
I get the error: "Requiring unknown module '../img/button_australia.png'"
I assume I've gone wrong when passing the string down as a prop but from the examples I've looked I don't see what's wrong with what I've done. Thanks :)
As discussed in this react-native issue, it's not possible to require assets or javascript modules with dynamically generated names, e.g. variables.
This is because the React Native packager uses require (and import) statements to generate the module and asset bundles at compile-time, so the value of the variable is not known.
The simplest way is to just pass the image source to the component directly:
<ImgButton
onPress={console.log("pressed")}
img={require('../img/button_australia.png')}
/>