How to add a link to react-native-paper <Paragraph></Paragraph> tag?
For Android the dataDetectorType works with RN Paper paragraph as well.
<Paragraph dataDetectorType="link">http://youraddress</Paragraph> or <Paragraph dataDetectorType="email">mail address</Paragraph>
But for iOS and Android both the easiest way to achieve this is using the Linking.
import { Linking, } from } from 'react-native';
then
<Paragraph
style={{ color: 'blue', textDecorationLine: 'underline', }}
onPress={() => Linking.openURL('mailto:address')}>
mail
</Paragraph>
Related
I'm new to using Material UI and have integrated into my portfolio website to create an ImageList that redirect to other projects I'd like to show possible employers. I'm having trouble editing the style of the text inside ImageListItemBar. I've tried using the primaryTypographyProps and sx to no avail. Could someone point me in the right direction?
<Typography variant="h3" color="common.red">
<ImageListItemBar
primaryTypographyProps={{fontSize: '30px'}}
sx={{
background: 'black',
}}
position="bottom"
title={item.title}
/>
</Typography>
//tried this as well
<ImageListItemBar
sx={{
color: '#000';
background: 'black',
}}
position="bottom"
title={item.title}
/>
Here is the code You are after:
<ImageListItemBar
title="image title"
subtitle="image subtitle"
sx={{
"& .MuiImageListItemBar-title": { color: "red" }, //styles for title
"& .MuiImageListItemBar-subtitle": { color: "yellow" }, //styles for subtitle
}}
/>
I recommend studying official MUI docs for ImageList and ImageListItemBar API
Hamed's answer is correct, you need to target the specific class applied to the title in order to style it.
I've been developing a pattern of doing this lately, where you can import the component's classes and style accordingly using styled. This allows you to use your IDE to autocomplete the class names and target them accordingly.
const StyledImageListItemBar = styled(ImageListItemBar)(() => ({
[`& .${imageListItemBarClasses.title}`]: {
color: "red"
},
[`& .${imageListItemBarClasses.subtitle}`]: {
color: "yellow"
},
backgroundColor: "black"
}));
Then you can just use the component without having to resort to sx:
export default function App() {
return (
<StyledImageListItemBar
title="This is a title"
subtitle="This is a subtitle"
/>
);
}
Here's a sandbox of this in action if you want to play with it: https://codesandbox.io/s/mui-targetting-classes-8y5kpm?file=/src/App.js
That being said, if you're planning to reuse this component with the custom styling, I would consider overriding the default styling in theme too.
I am rendering a camera view inside the react-native TouchableOpacity, how do I make it clickable?
The same version of code works well on iOS, the touchableOpacity is clickable and produces the right output
<TouchableOpacity style={{width:'100%', height:300}} onPress={() =>alert("hey")}>
<Camera
style={{ height: 300, width: '100%', display: this.state.camera }}
type={this.state.type}
autoFocus={'on'}
ratio={'4:3'}
focusDepth={0}
ref={(ref) => { this.camera = ref }}>
</Camera>
</TouchableOpacity>
I expect the output to be an alert with "hey" when I press the TouchableOpacity instead I get nothing on android but I get a "hey" on iOs
That's because TouchableOpacity behavior diverges between iOs and Android. A quick fix would be just to replace the TouchableOpacity with TouchableWithoutFeedback in Android. Here's a way to do it:
const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableWithoutFeedback });
Then just use this constant to wrap your Camera view.
PS: Make sure you imported TouchableOpacity, TouchableWithoutFeedback and Platform from react-native module.
I am currently developing a react native app, and for my login screen it has a background that has two points where the component changes its curve. Attached is the image as it can better show what it looks like then I can explain it. I was wondering if it would be possible to recreate this screen in React Native. I have access to react-native-svg but I am using expo.
As you can see, there is two curves to the blue background/component part of the screen. (This is a mockup created in Figma, not yet implemented in an App) How would I go about designing this in react native?
To use SVGs you have to use react-native-svg. Expo has it built in, though you can install it in any react-native package. You can read more about react-native-svg here.
It is fairly straight forward to use the library. As you already have a path for the SVG you can just use the Path property to draw the path on the screen.
import * as React from 'react';
import { Text, View, StyleSheet, Dimensions, TextInput } from 'react-native';
import { Constants, Svg } from 'expo';
const WIDTH = Dimensions.get('screen').width;
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Svg height={300} width={WIDTH}>
<Svg.Path
d="M-17.5 378.5C31.5 32.5 302.5 463 375 89C447.5 -285 375 644 375 644H0C0 644 -66.5 724.5 -17.5 378.5Z" // put your path here
fill="blue"
stroke="blue"
/>
</Svg>
<View style={{backgroundColor: 'blue', flex: 1}}>
<View style={{width: WIDTH - 60, height: 60, backgroundColor:'white', borderRadius: 30, margin: 30, justifyContent: 'center', paddingLeft: 10}}>
<TextInput
placeholder='email'
/>
</View>
</View>
</View>
);
}
}
You can see it working in the following snack https://snack.expo.io/#andypandy/svg-example
This is what it looks like on an iPhone X
Umm I would do this few different way such a svg (react-native-svg) but why do that much hard work when this can be achievable just using an background image.
Use ImageBackground (https://facebook.github.io/react-native/docs/imagebackground) and fix this easily. Then add the logo and the login container as children.
Let me know if this works for you. :)
EDIT:
You might want to look at https://github.com/vault-development/react-native-svg-uri as well.
When running the code an emulator for an IOS phone is produced. The application launches but produces an entire black screen. The only way to see the text is by changing the color of the text. My code is seen in the bottom.
import React from "react";
import { AppRegistry, Text } from "react-native";
const App = () => {
return <Text style={{ color: "red" }}>Some Text</Text>;
};
AppRegistry.registerComponent("albums", () => App);
From my understanding. The initial default should be a white background and the text should be in black. Hope someone can help me better understand what the issue might be. This is my first attempt with React Native although I do have some experience with React.
Thank you
You need to wrap text in a View like
<View style={{backgroundColor: 'white'}}>
<Text style={{ color: "red" }}>Some Text</Text>
</View>
As for the default style being black text on white background, that's the case if you use react-native-init or Expo to generate the project.
I want to display a link button instead of button on my react native page. Right now I have the below code:
<Button onPress={this.handleGetDirections} title="Get Directions" />
I want to show the above button as a link. How can I achieve this in React Native.
Thank You.
Use textDecorationLine.
E.g :
<TouchableOpacity>
<Text style={styles.underLineText}>Your underline Text</Text>
</TouchableOpacity>
underLineText: {
fontSize: 12,
textDecorationLine: 'underline',
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
}
If it is about the styling of a link within the browser. That's done by the default browser vendor styles. You won't have that happen in react-native.
You can have a simple Text element that is styled to look like a link (ie: blue) and have a onPress handler for that.
Just follow Pritish Vaidyas... link :)
Hope this helps