BorderBottomStyle is not working in the React native and as well as styled-components. BorderStyle is working fine. But BorderBottomStyle-dashed is not working and getting Component Exception.
<LocationText>BORDERBOTTOMSTYLE</LocationText>
LocationText = styled.Text`
margin-left:2%;
font-family:metropolisRegular;
font-size:20px;
padding-left:2px;
border-bottom-color:rgba(0,0,0,0.3);
border-bottom-width:2px;
border-bottom-style:dashed;
`;
https://i.stack.imgur.com/GzzUU.png
Any Better idea to style only the border Bottom with dashed in React native??
In react-native, you can't style many components directly as this is not necessary. Often times the better approach is to put the component inside a container and then style the container.
If you're a beginner, then how you attach the styles to the "View" is something you can google and not important, but this is an example of just showing the one style attached inline.
<View style={{ border-bottom-style: "dashed"}}>
<LocationText>BORDERBOTTOMSTYLE</LocationText>
</View>
Related
We are using react-native-calendar from wix.com, we are planning to create a dark mode version but we can not change the agenda background colore. how can i access it ?
I've found a solution to style the calendar element, the scrollpad, but ot the background of the view where all events are renderd.
I saw an example of the Agenda component on the repository and figure out it has a prop called theme. In the types.ts file, you can see the theme interface and all properties. Follow a simple example:
<Agenda
// Agenda theme
theme={{
agendaKnobColor: '#768390',
calendarBackground: '#2d333b',
}}
/>
I created a snack on Expo for you to see the complete example on the computer with the source code. Or you scan the QR Code from your smartphone using the Expo Go app.
You can change the agenda background color by modifying the value of reservationsBackgroundColor inside your theme object. Here is an example :
theme = {
{
reservationsBackgroundColor: "#000000",
}
}
I'm using the React Native Base Button.
The fontSize prop doesn't seem to work at all, it doesn't do anything. Am I doing something wrong, or misunderstanding the prop?
I did install the library using --legacy-peer-deps, because it doesn't offically support React 18 yet, but it seems to be working fine outside of this.
It appears you can pass props to the underlying Text in the Button with the _text prop:
<Button _text={{fontSize: "2xl"}}>
Press Me
</Button>
You are trying to increase Button's font size that is why it is not working. Think about that you try to increase TouchableOpacity's font size.
Here is a possible Solution
<Button>
<Text style={{fontSize:16}} >Button Title</Text>
</Button>
I have to set a width of a View in term of the current font size. So I am wondering if React Native have an analogue of the Web's 1em?
I have found a solution with PixelRatio:
import { PixelRatio } from 'react-native';
// ...
<View style={{ width: 100 * PixelRatio.getFontScale() }} />
But it is too complicated and obscure, in my opinion.
Is there a more simple and clean way to solve the problem?
Thank you.
After a long search, I eventually found an answer in the React Native API Reference:
width sets the width of this component.
It works similarly to width in CSS, but in React Native you must use points or percentages. Ems and other units are not supported.
So the getFontScale() is the only possible solution.
In React Native, is there a way to toggle visibility of an element?
For example:
<Text visibility={this.state.isVisible}>Visibility depends on state</Text>
this might be crude but it works.
under render
var visibletext = null;
if (this.state.isVisible) {
visibletext = (<Text>Visibility depends on state</Text>);
}
then, under return part
<View style={styles.container}>
{visibletext}
</View>
There are various ways to do this. See the Conditional Rendering guide at the React.js website, which explains different options.
One simple way is to use the && operator inline:
{this.state.isVisible &&
<Text>Something</Text>
}
Note that with the conditional rendering approach, if you have (for example) some views centered vertically, this views will suddenly move up or down when the text appears (to give room for the new view). Another approach that avoids this jump is to either change the text color or set the text to empty string:
// Change the text color
<Text style={this.state.isVisible ? {color: 'black'} : {color: 'white'}}>Something</Text>
// Set text to empty string
<Text>{this.state.isVisible ? "Something" : ""}</Text>
Changing the color of the text is the best way to make sure that the other views don't suddenly move when showing the text, given that the text is already occupying the layout space it needs.
I did not put any undefined variables in the view but it appear some Unknow tags,so I wonder what is Unknown there?
<View>
<View style={styles.row}>
<Text>{rowData.user.name}ยท {rowData.createdDate}</Text>
<Text>{rowData.title}</Text>
</View>
<View style={styles.separator} />
</View>
in chrome I seen between the View and Text there is a Unknown.
I wonder if this is due to text nodes in your code, specifically white space like tabs and newlines. Please see this issue from the react dev tools:
https://github.com/facebook/react-devtools/issues/44
There are several such issues on the devtools tracker, sometimes related to a lack of displayName on components but I don't see how that applies here.
Suggest opening an issue on the React Native Github tracker as I doubt this is expected. Someone on the RN team might be able to give us a better explanation.
Did you define Text and View?
At the top of your file you should have something like this,
ES6
var {
View,
Text,
} = React;
ES5
var View = React.View;
var Text = React.Text;