As many others before me, I'm looking for the way to customize expo android's theme colors and styles in order to customize native components styles like DatePicker.
I found a lot of posts explaining the same old thing: "Update your style the native android way!"
Ok then, but my React native project doesn't have any "res/values/styles.xml" and so on. Creating them from scratch has no effect.
There's one step that I'm deadly missing here, but which one?
My repo looks a bit like this actually:
.expo
/* a bunch of folders containing my custom js */
App.js
app.json
babel.config.js
package.json
package-lock.json
You can use Style Sheet.
Create a new StyleSheet:
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
Use a StyleSheet:
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
this is detail link
To configure a style, such as Android.xml, you can separate it by doing expo eject.
When you do expo eject, you get Android folder.
about `expo eject' link
Related
Hello I'm trying to use useAnimatedKayboard() hook from reanimated 2, everything works fine until I click r to reload the project. The app crashes in android and in ios. I'm using it exactly the same as the doc:
function AnimatedKeyboardExample() {
const keyboard = useAnimatedKeyboard();
const translateStyle = useAnimatedStyle(() => {
return {
transform: [{ translateY: -keyboard.height.value }],
};
});
return (
<ScrollView contentContainerStyle={{flex: 1, justifyContent: 'center',
alignItems: 'center' }}>
<Animated.View style={translateStyle}>
<TextInput />
</Animated.View>
</ScrollView>
);
}
Does anyone know how to resolve this?
EDIT: this is a new project in Expo
useAnimatedKeyboard is a Reanimated 3 feature, you're using Reanimated 2, which doesn't have it. The app crashes are most likely from calling the undefined function. If you can upgrade to Reanimated 3, that's probably your quickest solution.
The docs you linked aren't super obvious about it, but they are from the "next" version, which is 3.0. If you click through to the docs from the current release, you'll see it's not in the Hooks section.
Does anyone know how to configure stylelint for react native (typescript) and StyleSheet?
src/sample.tsx
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
borderWidth: 4,
borderColor: "#20232a",
borderRadius: 6,
backgroundColor: "#61dafb",
color: "#20232a",
textAlign: "center",
fontSize: 30,
fontWeight: "bold"
},
example: {
unknown: "property"
}
});
export default App;
.stylelintrc.js
module.exports = {
"plugins": ["stylelint-react-native"],
"rules": {
"react-native/css-property-no-unknown": true
}
}
When I run stylelint '/src/**/.tsx'*, I got error like "you need use postcss". Ok, I found this #stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works.
In the best case, the command runs without errors, although I added a property of which does not exist.
PS. stylelint version - 14, react native version - 0.66.4
You can use the #stylelint/postcss-css-in-js custom syntax.
test.ts
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}>
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
color: "#eaeae",
background: "linear-gradient(#e66465, #9198e5)",
},
title: {
fontWeight: "bold",
},
});
export default App;
.stylelintrc.json (with three example rules turned on)
{
"customSyntax": "#stylelint/postcss-css-in-js",
"rules": {
"color-no-invalid-hex": true,
"font-weight-notation": "numeric",
"function-disallowed-list": ["linear-gradient"]
}
}
output
% npx stylelint "test.ts"
test.ts
12:12 ✖ Unexpected invalid hex color "#eaeae" color-no-invalid-hex
13:17 ✖ Unexpected function "linear-gradient" function-disallowed-list
16:17 ✖ Expected numeric font-weight notation font-weight-notation
You may want to use both Stylelint and the eslint-plugin-react-native plugin for ESLint together as they are complementary tools that do different things.
The ESLint plugin has 7 rules. Only one of which, sort-styles, overlaps with Stylelint. The other rules don't touch on the actual CSS inside your object notation. So you can use that plugin and then use Stylelint to spot possible errors and limit what language features are used in your CSS.
I found this #stylelint/postcss-css-in-js package, but no matter how I connect it, nothing works
You may have encountered a bug in the package. It is a monolithic package that tries to support every flavour of CSS-in-JS. It'll likely be deprecated in the future in favour of leaner packages dedicated to specific CSS-in-JS libraries, the first of which is postcss-lit.
That's what happens when you recycle. In fact, we shouldn't use the stylelint, because we have a typescript. Just use eslint for this. For example: https://github.com/Intellicode/eslint-plugin-react-native
I saw this article:
https://expo.canny.io/feature-requests/p/react-native-fast-image
I install expo react native fast image. So I want to use it but I get this err message:
Invariant Violation: requireNativeComponent: "FastImageView" was not found in the UIManager.
Code:
...
import FastImage from 'react-native-fast-image';
...
{ /* Modal Shipping */ }
<Modal
isVisible={modalView}
swipeDirection="down"
swipeThreshold={20}
propagateSwipe={true}
backdropTransitionOutTiming={0}
>
<View style={{ justifyContent: 'center', padding: 12, alignItems: 'center', backgroundColor: '#fff', borderRadius: 12, padding: 12, borderWidth: 4, borderColor: '#ac67f9'}}>
<FastImage source={{uri: 'https://i.ebayimg.com/thumbs/images/g/QSIAAOSw3gNggE1r/s-l225.webp'}} resizeMode="contain" />
</View>
</Modal>
Is there any new option for this? In expo project, "FastImageView was not found in the UIManager." still occurs.
I've managed to install react-native-fast-image to my expo project. Here is what I've done:
Make sure you run the eas build -p all --profile development Ensure
eas-cli is installed prior to run this script.
After running it, you will have an eas.json file in the root dir of
the project.
The next step is to run expo run:ios or expo run:android, then
you will notice the generated native folders (android, ios) in the
root dir again...
All should work just fine after these steps.
Use this package it is super fast
expo fast image
Looking for a solution for this problem since 2 days and the internet didn't provide me with a solution for the first time of my life, so this is my first post on StackOverflow :)
So, I'm building a react-native (0.59.8) app with Expo (3.4.1), testing with Android 9.1.
I have an email TextInput that looks like that :
const style = {
backgroundColor: '#181818',
color: '#fafafa',
width: '100%',
borderColor: $primary,
borderWidth: 1,
borderRadius: 4,
marginBottom: 16,
padding: 8,
};
return (
<TextInput
placeholder="Email"
keyboardType="email-address"
autoCompleteType="email"
style={style.input}
autoCorrect={false}
selectionColor={$primary}
/>
);
The TextInput is first shown as expected, and there are no problems when I fill it manually (typing my email address).
But, when I select an Android suggestion, the TextInput style changes (colour become light yellow, backgroundColor become yellow/green, and borderColor become orange) that is a bit ugly :/.
It looks like the behaviour is the same as -webkit-text-fill-color in standard CSS, but can't find the counterpart in RN.
Thanks for your help :)
https://developer.android.com/guide/topics/text/autofill-optimize#highlighted
You can customized the styling using the android xml files. See here for more details.
In every code example mentioned in NativeBase Docs, there's no usage of React StyleSheet.
I didn't find a way to override styles of NativeBase.
How can I include React StyleSheet into my app?
NativeBase uses a different approach to add styling to your component.
It uses a Utility first approach, wherein it leverages the ReactNative stylesheets API and adds a layer of Utility Props on top of it. The idea is to pass props to your component to change their styling, instead of defining a className and adding styles in a separate stylesheet.
For example, with React Native, you would write:
function Example() {
return (
<View style={styles.container}>
{/* content */}
</View>;
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#0891b2',
paddingVertical: 16,
paddingHorizontal: 12,
borderRadius: 5,
alignSelf: 'center',
width: 375,
maxWidth: '100%'
}
});
Now, with NativeBase, to achieve the same view, you would write it as follows:
function Example() {
return (
<NativeBaseProvider>
<Box bg="primary.600" py="4" px="3" rounded="md" width={375} maxWidth="100%">
{/* content */}
</Box>
</NativeBaseProvider>;
);
}
Here, NativeBase has already defined bg, py, px, etc. as props and mapped them to the styling properties of backgroundColor, paddingVertical , paddingHorizontal, etc. respectively.
There is a list of these mappings provided here, which you can simply refer to add any styling that you may need for your component.
For NativeBase usually if you want customize the appearance you need to do it at a theme level and not a component/widget level.
http://nativebase.io/docs/v0.5.2/customize
I believe the reason it this keeps the UI consistent.
Have a look at the source code for all the widgets that you are trying to override the style for:
https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/
There are certain cases where you can amend certain aspects e.g. for the button
this.props.style is used anywhere but this.props.textStyle
So you can override the textStyle when you define the component:
<Button textStyle={{...}}/>
https://github.com/GeekyAnts/NativeBase/blob/master/Components/Widgets/Button.js