Does anyone know how can i change that purple color which i marked?
I used react-native-paper latest version.
Thanks!
Have you tried adding a theme to your paper. See below example.
const theme = {
...DefaultTheme,
roundness: 2,
version: 3,
colors: {
...DefaultTheme.colors,
primary: '#3498db',
secondary: '#f1c40f',
tertiary: '#a1b2c3'
},
};
<PaperProvider theme={theme}>
<App />
</PaperProvider>
Please take note this is not my code but from docs. See docs involved from this link: https://callstack.github.io/react-native-paper/theming.html
Related
I'm still struggling with an error that I can't figure out.
I did not find clear information on how to solve it (only information on how to put the color on a single component)
In their documentation it says that you have to override in a config and set the theme to dark, but it works for me..
My App.tsx
const config: object = {
useSystemColorMode: false,
initialColorMode: 'dark',
};
// extend the theme
const customTheme = extendTheme({ config });
return (
<Provider store={store}>
<NativeBaseProvider theme={customTheme}>
<Navigator />
</NativeBaseProvider>
</Provider>
);
And now if I go to another screen where I create a new component with <View></View> it's still white..
I am using react-native-reanimated and want to animate the colors of my expo-linear-gradient. Unfortunately, nothing changes. I also created a Expo Snack.
import * as React from 'react';
import { View, Button } from 'react-native';
import Animated, {
interpolateColor,
useAnimatedProps,
useSharedValue,
withTiming,
} from 'react-native-reanimated';
import { LinearGradient } from 'expo-linear-gradient';
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
export default function App() {
const colorsValue = useSharedValue(1);
const animatedProps = useAnimatedProps(() => {
return {
colors: [
interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#000000']),
interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#00ff00']),
],
};
});
return (
<View>
<AnimatedLinearGradient
animatedProps={animatedProps}
style={{ height: 400, width: '100%' }}
/>
<Button
title="Change colors"
onPress={() => (colorsValue.value = withTiming(0, { duration: 2000 }))}
/>
</View>
);
}
Am I using animatedProps wrongly here? Any help would greatly be appreciated.
unfortunately, I'm not sure you can do that. You're using correctly the useAnimatedProps hook, but usually it doesn't work for all properties.
If you want to achieve this type of animation, I highly recommend you to try the LinearGradient component from #shopify/react-native-skia package.
You can easily reuse the same logic, but with the Skia values:
const colorsValue = useSharedValue(1);
const skiaFirstColor = useValue(0);
const skiaSecondColor = useValue(0);
useSharedValueEffect(() => {
skiaFirstColor.current = interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#000000']);
skiaSecondColor.current = interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#00ff00']);
}, colorsValue); // you can pass other shared values as extra parameters
const colors = useComputedValue(() => {
return [skiaFirstColor.current, skiaSecondColor.current]
}, [skiaFirstColor, skiaSecondColor])
return (<...
<Canvas>
<LinearGradient colors={colors} />
</Canvas>
</>)
Let me know if it helps.
I think it is not possible to do this with expo-linear-gradient because under the hood of this component on ios for example is CALayer and if you check reanimated docs for useAnimatedProps it says that:
Only "native" properties of "native views" can be set via useAnimatedProps. The most common usecase for this hook is when we want to animate properties of some third-party native component, since most of the properties for the core React Native components are a part of the styles anyways (at least the properties for which it makes sense to be animated). You can use the following functions to animate properties that Reanimated don't support by default:
addWhitelistedNativeProps() is used to animate properties that trigger layout recalculation, you can find them here.
addWhitelistedUIProps() is used for properties that are updated directly on the UI thread, currently allowed props are listed here.
Also looks like it is not possible to do with SVG - https://github.com/software-mansion/react-native-reanimated/issues/690
Maybe this example can help you to build your animation with SVG https://github.com/FullstackStation/react-native-svg-animated-linear-gradient
I am trying to use createDrawerNavigator from import { createDrawerNavigator } from '#react-navigation/drawer'; in react native. However, I am getting the error below, which I don't know how to solve.
Error: Requiring module
"node_modules\react-native-reanimated\src\Animated.js", which threw an
exception: Error: Reanimated 2 failed to create a worklet, maybe you
forgot to add Reanimated's babel plugin?
In babel.config.js I tried to add the below code but not working as well
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
'react-native-reanimated/plugin',
]
};
};
The Below code is my component
import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { NavigationContainer } from '#react-navigation/native';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
onPress={() => navigation.navigate('Notifications')}
title="Go to notifications"
/>
</View>
);
}
function NotificationsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button onPress={() => navigation.goBack()} title="Go back home" />
</View>
);
}
const Drawer = createDrawerNavigator();
export default function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
Please complete the setup for react-native-reanimated.
You have to add 'react-native-reanimated/plugin', in the babel.config.js file so the final code in babel.config.js will look like
module.exports = {
...
plugins: [
...
'react-native-reanimated/plugin',
],
};
As state in the setup docs for react-native-reanimatedHere
Also you need to complete setup for android as well (if not done yet) as stated Here
If you are using expo then follow these steps
Finally, run expo r -c to clear the cache.
If you are using expo. Set this in babel.config.js:
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
};
Note: If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array
After you add the Babel plugin, restart your development server and clear the bundler cache: expo start --clear.
You must install according to these instructions:
[https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/][1]
Also, make no mistake Be careful where you write the following code
#Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage(); }
[Solution][1]
yarn add react-native-reanimated
cd ios
pod install
And Import on either Index or App .js file
import Animated from 'react-native-reanimated';
[1]: https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started/
I am using react-native 0.69.3 and also had an issue with compiling reanimated#2.10. I updated to #2.11.0 and it fixed my compile error.
Make sure react-native-reanimated is up to date and the other packages are the same then try running npx react-native link react-native-reanimated.
If that didn't work you need to set up react-native-reanimated properly. Check out the documentation on how to set it up.
According to react navigations drawer documentation.
After installing all the packages
To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:
import 'react-native-gesture-handler';
Now this might now work for you. To complete the installation you have to change your babel.config.js file add the following:
plugins: [...,"react-native-reanimated/plugin"]
Note ... just means your other plugins if you have. Remove it if you don't have any.
You are almost there. The final thing you have to know and do is:
Note: If you load other Babel plugins, the Reanimated plugin has to be
the last item in the plugins array.
After you add the Babel plugin, restart your development server and
clear the bundler cache: expo start --clear
You can reference the expo reanimated docs for more details
Add this to babel.config.js file:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin'],
};
then run this to clear cache and restart development server:
npx expo start --clear
learn more on expo official doc.
I just updated expo to SDK 35 because I wanted to use the new react-native-appearance module to make the dark and light mode dependent of the systems settings. I followed the steps from the docs carefully. (https://docs.expo.io/versions/latest/sdk/appearance/) But if I try to import anything my iPhone 11 Pro Max Emulator gives me the following warning:
null is not an object (evaluating 'NativeAppearance.initialPreferences')
<unknown>
polyfill.tsx:15:68
loadModuleImplementation
require.js:331:6
<unknown>
index.tsx:9:24
loadModuleImplementation
require.js:331:6
<unknown>
App.js:4
loadModuleImplementation
require.js:331:6
<unknown>
AppEntry.js:4
loadModuleImplementation
require.js:331:6
guardedLoadModule
require.js:197:45
global code
<unknown file>:0
Any ideas on how to fix this? Haven't found anything online since this is a pretty new feature.
You probably need to link your module.
On iOS that looks like this:
$ npx pod-install
$ react-native run-ios
not supporting react-native-appearance in expo.
you can use colorscheme and appearance from react native
app.json configuration:
{
"expo": {
"userInterfaceStyle": "automatic"
}
}
In EAS Build and custom development builds you'll need to install the native module expo-system-ui otherwise the userInterfaceStyle property will be ignored. Running expo config --type introspect will warn if the project is misconfigured:
ยป android: userInterfaceStyle: Install expo-system-ui in your project to enable this feature.
Bare projects
iOS configuration
You can configure supported styles with the UIUserInterfaceStyle key in your app Info.plist. Use Automatic to support both light and dark modes.
Android configuration
Appearance locking requires react-native#0.63.3 to work correctly.
Ensure that the uiMode flag is present on your MainActivity (and any other activities where this behavior is desired) in AndroidManifest.xml:
<activity
...
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode">
Implement the onConfigurationChanged method in MainActivity.java (react-native#0.63.3 don't need this):
import React from 'react';
import { Text, StyleSheet, View, Appearance,useColorScheme } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { DefaultTheme, DarkTheme } from '#react-navigation/native';// automatically switches bar style based on theme!
export default function App() {
const colorScheme = useColorScheme(); or, const colorScheme = Appearance.getColorScheme();
console.log(colorScheme)
const themeTextStyle = colorScheme === 'light' ? styles.lightThemeText : styles.darkThemeText;
const themeContainerStyle =
colorScheme === 'light' ? styles.lightContainer : styles.darkContainer;
return (
<View style={[styles.container, themeContainerStyle]}>
<Text style={[styles.text, themeTextStyle]}>Color scheme: {colorScheme}</Text>
<StatusBar />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
lightContainer: {
backgroundColor: '#d0d0c0',
},
darkContainer: {
backgroundColor: '#242c40',
},
lightThemeText: {
color: '#242c40',
},
darkThemeText: {
color: '#d0d0c0',
},
text:{
color:'#fff',
fontSize:22,
fontWeight:"bold",
},
})
As doc said i used this to change default theme of my project:
Vue.use(Vuetify, {
theme: {
primary: '#ff0000',
secondary: '#ff0000',
accent: '#ff0000',
error: '#ff0000'
}
})
But nothing happens. Default primary color(#1976D2) is still there with no change. Why it is not working?
Editing theme with Vue.use is not supported in older versions of Vuetify.
Upgrading Vuetify to 0.17.0 or higher will solve your problem.