How to style nativewind element with multiple custom styles - react-native

I want to style a component with my own custom className that has certain properties. Tailwind lets you do this through App.css, but in a react native application there is none. How do you add say a '.title' class to tailwind with certain properties?
.title {
font-size: 24px
font-weight: 800
}
Applying it to Text JSX object:
<Text className="title">Title Text!</Text>

I figured out this method of styling multiple of the same components. Nativewind and Tailwind suggest not using this method, but it works for both.
In your tailwind.config.js file, add the following line of code above your module.exports:
const plugin = require("tailwindcss/plugin");
module.exports = {...}
Then in your plugins list, add:
plugin(function ({ addComponents }) {
addComponents({
".title": {
fontWeight: 800,
fontSize: 24,
},
});
}),
Make sure your styling uses the same property names as react-native, and NOT css (fontWeight vs font-weight). Restart your server, and it should work!

You can use twrnc npm package for this. Install it from here.
Import it like this in the file at the top.
import tw from "twrnc";
And use it like this
<Text style={tw` text-2xl font-extrabold`}>Title Text!</Text>

Related

React Native - Tailwind CSS autocomplete in VSCode for twrnc package

I am using twrnc package for using Tailwind CSS in React Native Project.
The syntax for that is,
<View style={styles.container}>
<Text style={tw.style`text-green-500 font-bold`}>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
But I am not getting suggestions from VSCode for Tailwind CSS classes. Can anyone suggest or help to get suggestions for classes?
First install Tailwind CSS IntelliSense extenstion. Then in the setting, add style to class attributes
- //Use TailwindCss in ReactNative:
- Install twrnc: npm install twrnc
- import tw from "twrnc";
- Be sure to install the TailWind CSS Intellisense extension in VS code
- Go to the extension settings and
add 'style' in Class Attributes
- Go to your project root folder and
manually create a file named 'tailwind.js' or 'tailwind.config.js'
- Start using TWCSS as in the docs: eg; <View style={tw`bg-gray-300
flex flex-1 px-5 pt-20`}>
If you haven’t already, install the Tailwind CSS IntelliSense extension.
This extension’s autocomplete and code hinting will only work on props named className or class, which React Native’s components do not have. So I’ve found that a worthwhile workaround is to implement your own versions of the React Native components and use those instead. Your version can have a className prop, which enables the suggestions from VSCode for Tailwind.
For example, your implementation of Text:
import { Text as TextRn } from "react-native";
import tw from "twrnc";
const Text = ({ className, children, ...rest }) => {
return <TextRn style={tw.style(className)} {...rest}>{children}</TextRn>
};
export default Text;
And the usage:
import View from "./src/Text"; // or wherever you added the Text.js file
// ...
<Text className="text-green-500 font-bold">Open up App.js to start working on your app!</Text>

Using React Native Elements, how can I globally style the text color of a <ListItem.Title> component?

I'm using the react-native-elements ui framework with ThemeProvider and trying to globally style the text of a component like this...
<ListItem bottomDivider>
<ListItem.Title>Name</ListItem.Title>
<ListItem.Input>DoB</ListItem.Input>
</ListItem>
I want to style this <ListItem.Input> text color red. So I've tried a ton of things similar to the code below, but I can't get anything working. Any ideas?
ListItem: {
inputStyle: {
color: "red"
}
}
I'd prefer to keep the styling global and not to do it inline, if possible.
You have to use ListItemInput
ListItemInput:{
style:{}
}

Customize TextInput Label of the react-native-paper in the case of React Native Web

I'm working with the React Native Web and React Native Paper library with Styled Components. Basically I would like to customize the TextInput inner components: Label and html input
The questions are:
1) How to change Label styles? eg. width\size\color, etc. ?
2) How to change html input styles? I want to set outline: none to prevent the blue border show on focus in the case of browser.
I understand that in the case of native we don't have html and the native-web transpiles it.
And I can't understand how to catch the nested label component to change its styles. Because I want to show gray label when non-filled, violet when filled and the Input text should be black.
In the case of the web, it's trivial but in the case of native, I don't know how to handle it.
So is that possible at all?
Thanks for any help. Here is the code example
import React from 'react';
import {
View,
Platform,
} from 'react-native';
import {
TextInput as NativePaperInput,
withTheme,
} from 'react-native-paper';
import styled from 'styled-components/native';
const NativePaperInputThemed = withTheme(NativePaperInput);
export const TextInputStyled = styled(NativePaperInputThemed)`
${(props: any) => {
return `
outline: none; // doesn't work
input: { outline: none; } // doesn't work
& input: { outline: none; } // doesn't work
// Label change style ?
color: ${props.theme.theme10x.palette.typography.placeholder}; // doesn't work
border-color: '#f92a2a8a'; // doesn't work
height: 52px;
`;
}
}
`;
P.S. Basically even colors and fontFamily doesn't work somehow
label={<Text style={{fontSize: 20}}>{t('PersonalDetailsYuvitalOrg:editInput.firstName')}</Text>}
Some guy tried to change label style manually, the maintainer reponse:
You can pass fontSize via style prop. However it will affect both
label and input text. There is no way to change only one of them.
https://github.com/callstack/react-native-paper/issues/1505
You can pass a component for the label prop. For Example:
export const Input = styled(TextInput).attrs({
dense: true,
activeUnderlineColor: theme.colors.ui.blueDark,
label: <Text style={{fontSize: 50}}>My Custom Label</Text>
})`
width: 100%;
height: 50px;
font-size: 16px;
`
However, I have not looked for a way to control the scale when the animation occurs.

Styling multiple style props with styled-components on React Native

I have been using Styled-components with React web for a while now, but recently I have started working on a React Native app which I decided to use styled-compoents in. It's been great when styling components that have just the style property, such as the default react-native components.
The problem I've been having though is when I need to style a more complex component that has multiple style properties such as containerStyle, inputStyle, and others.
When it's only one style property with a different name I can do the following:
const StyledBadge = styled(({ style, ...rest }) => {
return <Badge {...rest} containerStyle={style} />;
})`
position: absolute;
right: 0;
top: 0;
`;
This works flawlessly but when the component has multiple styles, I have no idea what to do:
const StyledList = styled(({ style, ...rest }) => {
return <List {...rest} containerStyle={style} searchInputStyle={?} searchItemStyle={?} />;
})`
`;
With components like Gifted-React-Native-Chat is even worse because it has properties for passing properties as objects to its internal components, such as messageProps, listViewProps, containerProps and all of them have the style property.
Does anyone have any idea how to do that or if it's even possible?
I've been searching and trying to find a solution for this for a few days but I can't.
Thanks!
Here's how we ended up doing it.
Styled-components only work with the style prop but many custom components don't expose this prop. Instead they provide a *Style prop that gets passed to child component style props.
As an example, react-native-material-textfield has 5 style props.
We use the attrs function to keep the organization of styles in one file with the rest of the styled components.
This doesn't allow you to use traditional css syntax for the pseudo component, but it's the best we could think of to keep all styles organized.

Including scss in react-native project?

Is there a way to work with scss files in react native application? I am just curious and don't have much knowledge in react-native application architecture, But was thinking of using my current project scss files to work with the new react-native-android project we are planning to build.
REACT NATIVE VERSION : "0.46.4"
REACT VERSION : "16.0.0-alpha.12"
BABEL-PRESET-REACT-NATIVE: "2.1.0"
UPDATE :
I searched a little found out css-to-react-native which kinda let me transform my css into react-native stylesheet object, kinda workaround for me.
Thanks.
TL;DR: Yes, you can.
https://github.com/kristerkari/react-native-sass-transformer
It takes scss like:
.myClass {
color: blue;
}
.myOtherClass {
color: red;
}
and converts it to
var styles = {
myClass: {
color: "blue"
},
myOtherClass: {
color: "red"
}
};
Easy peasy.
TL;DR: No you cannot.
In react-native we are using inline style, which you can attain using Stylesheet.create.
Why you cannot CSS like styling is, In react native there are no #id either .class, so you cannot apply the style into #id or .class like you usually do in css styling. And also there is no related style, like in css you can do .element1 > .element2.
I think most developer main reason to use scss are to use nested class definition. Such as below:
.element1 {
> .element2 {
...
}
}
And because no class like feature in react-native component, there such method could not be apply in react-native.
Example how to create style in:
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
red: {
color: 'red',
},
});