I'm using React Native Paper library and I have a Modal and Dialog, I want to dialog to appear in front of the modal... is there a way to do this?
If there's no way I would have to code the structure of a dialog on my own using a Modal and I'd rather not do that...
Thanks
I had same problem and I solved it by using both react-native-paper and react-native's Modal.
react-native: 0.63.2
react-native-paper: 2.16.0
import {Modal as RNModal} from 'react-native';
import {Modal, Portal} from 'react-native-paper';
return (
<Portal>
<Modal>
<View>
...content for the view
</View>
<RNModal visible={props.visible} transparent={true}>
<Dialog visible={props.visible} onDismiss={props.onDismiss}>
...content for dialog
</Dialog>
<RNModal>
</Modal>
</Portal>
);
RNModal causes the inner dialog to always be on top.
Related
<Icon type="FontAwesome5" name="thumbs-up"/>
I want to make the icon to be smaller. what should I do with that code?
I used React Native
Working example below in React Native.
(Cannot give you tailored suggestion with the limited information given.)
import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
import { faChevronLeft } from '#fortawesome/pro-light-svg-icons';
...
<FontAwesomeIcon icon={faChevronLeft} size={18} color={'white'} />
Wrap the icon component in a View component and give width and height to the View.
If you are using Icon component from react-native-elements then there is a prop called size.
<Icon type="FontAwesome5" name="thumbs-up" size={10}/>
I have to answer my question, cause I found it
<Icon type="FontAwesome5" name="thumbs-up" **style={{fontSize: 20}}**/>
so my native base version is v2.15, so all I need was only to add fontSize
so thank you guys for helping me
I've made a component for doing an ImageButton using TouchableOpacity. Inside on it, I usually put a fontawesome and a text. The problem is that the press is only triggered if I push in the centre of the button (right on the fontawesome).
Another problem, but I think it's linked to the first, is that the animation of pressing, doesn't trigger if I press the icon in the centre.
For a recap:
If I don't click the icon in the button, for example the white space of it, I see the pressing animation but the onPress isn't triggered.
If I click the icon in the button, for example the font awesome, I don't see the pressing animation but the onPress is triggered.
The component:
import React from 'react';
import {Style} from './IconButtonStyle';
import { View, Text, TouchableOpacity,StyleSheet} from 'react-native';
const IconButton = (props) => (
<TouchableOpacity style={!props.style?Style.button:[Style.button,props.style]} onPress={props.onPress}>
<View>
{props.icon}
</View>
<View>
<Text>{props.title}</Text>
</View>
</TouchableOpacity>
)
export default IconButton;
Thanks
Ok, I just realized that I was messing with the caller component. I put the onPress on the image instead on the IconButton component.
Ive tested your code it looks ok : see snack
I know there is a question here in stackoverflow react native modal always visible but didn't solve my problem.
My code:
import * as React from 'react'
import {Text, View, Modal} from 'react-native'
export default function App() {
return (
<Modal animationType="slide" visible={false}>
<Text>Hello World :)</Text>
</Modal>
)
}
the problem is I hardcoded visible to false but again it is visible. How can this be fixed?
I have created an example here for you with react-native modal and using you code,
https://snack.expo.io/#waheed25/modalexample
You are rendering only modal
if it still not works for you add your code in the same snack.
I would like to open a link "in-app" without leaving a React Native app. The idea would be to open a webview on top of the application when clicking the link like Gmail or Messenger do.
Is there a way to do this in React Native?
Yes. You can create a new screen, with a rendered WebView inside.
You may refer to this link: https://docs.expo.io/versions/latest/react-native/webview/#__next
In your router, (if you're using react-navigation) you can just use "modal" for your navigation's mode.
this is very simple
import React, {Component} from 'react';
import {WebView} from 'react-native';
class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{marginTop: 20}}
/>
);
}
}
I have app in react native.In my app, I have two textinput , i want to set icon inside textinput.Icon can be any react native vector icons,especially "marker" or "location marker"..Can anyone tell me how to do that??????
Use react-native-vector-icons as you can render it inside a text component. But if you want to use it as if it were inside a TextInput you have to wrap Icon and TextInput inside a View:
<View>
<Icon ... />
<TextInput ... />
</View>
Then you can do something like this: