We Keep Coding

React-Native How to implement dark mode?

Hi there, I want to implement dark mode to my app. I have a file named ColorSchemes.js where is defined base theme and dark theme. So how could i implement theming baset on this file. I want to make save switching between themes at global level!
ColorSchemes.js
const darkTheme = {
main: palette.black,
background: palette.dark_grey,
alternative: palette.white_grey,
trackCardGradient: palette.black,
reviewCardGradient: palette.white_grey,
reviewCardTitle: palette.white_grey,
placeholderColor: palette.grey,
main_font: palette.light_grey,
second_font: palette.light_grey,
empty_star_color: palette.white_grey,
copy_right: palette.white,
search_bar: searchBarDarkTheme,
status_bar: statusBarDarkTheme,
};
const baseTheme = {
main: palette.blue,
background: palette.light_blue,
alternative: palette.white_blue,
trackCardGradient: palette.gradient_blue,
reviewCardGradient: palette.white_blue,
reviewCardTitle: palette.dark_blue,
placeholderColor: palette.midd_blue,
main_font: palette.light_blue,
second_font: palette.blue,
empty_star_color: palette.blue,
copy_right: palette.black,
search_bar: searchBarBaseTheme,
status_bar: statusBarBaseTheme,
};
// export const colors = darkTheme;
export const colors = baseTheme;

Create a Theme Manager in the form of React Context, that will provide app components the current theme, and a toggle() function to switch between themes

You can use the react-native-dark-mode library from below link. Also check out the example below.
React Native Dark Mode
App.js
import {initialMode, eventEmitter} from 'react-native-dark-mode';
state = {
mode: initialMode,
};
componentDidMount() {
eventEmitter.on('currentModeChanged', mode => {
this.setState({mode});
});
}
You can pass the state in your ScreenProps prop in your navigation AppContainer if you are using React Navigation.
ColorSchemes.js
import { DynamicValue } from 'react-native-dark-mode';
const colorSet = {
mainThemeBackgroundColor: new DynamicValue('#ffffff', '#000'),
mainThemeForegroundColor: new DynamicValue('#4991ec', '#4991ec'),
mainTextColor: new DynamicValue('#151723', '#ffffff'),
mainSubtextColor: new DynamicValue('#7e7e7e', '#f5f5f5'),
hairlineColor: new DynamicValue('#e0e0e0', '#222222'),
subHairlineColor: new DynamicValue('#f2f2f3', '#f2f2f3'),
tint: new DynamicValue('#3068CC', '#3068CC'),
grey: new DynamicValue('grey', 'grey'),
whiteSmoke: new DynamicValue('#f5f5f5', '#222222'),
headerStyleColor: new DynamicValue('#ffffff', '#222222'),
headerTintColor: new DynamicValue('#000000', '#ffffff'),
bottomStyleColor: new DynamicValue('#ffffff', '#222222'),
bottomTintColor: new DynamicValue('grey', 'lightgrey'),
mainButtonColor: new DynamicValue('#e8f1fd', '#062246'),
subButtonColor: new DynamicValue('#eaecf0', '#20242d'),
tabColor: new DynamicValue('#ffffff', '#121212'),
};
const navThemeConstants = {
light: {
backgroundColor: '#fff',
fontColor: '#000',
secondaryFontColor: '#7e7e7e',
activeTintColor: '#4991ec',
inactiveTintColor: '#ccc',
hairlineColor: '#e0e0e0',
},
dark: {
backgroundColor: '#121212',
fontColor: '#fff',
secondaryFontColor: '#fff',
activeTintColor: '#4991ec',
inactiveTintColor: '#888',
hairlineColor: '#222222',
},
main: '#4991ec',
};
This is an example on how you can use the react-native-dark-mode to get the dark mode working.

What is the correct way to set the new coordinates of a view after translation animation in react-native?

I am trying to run a few simple animations using react-native-animatable library. (But I believe the question should be generic to any react animations so adding other tags as well.)
The problem is, in the first time, the image animates just as expected. But when aimed to start second animation animation with the gesture, the image translation starts from its original coordinates.
A search yielt, in Android development (which is obviously not my case) there seems a method, setFillAfter which sets the coordinate after the animation.
My question is, how to set the location (left / top values for example) to the final translated point so that consecutive animation starts from the point the previous translation left.
The expo snack for below code block is here.
import * as React from 'react';
import { Image, StyleSheet, ImageBackground } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import testImg from './test.png';
import backImg from './back.png';
export default class App extends React.Component {
onTestMove(event) {
this.testAnimRef.transitionTo({
translateX: event.nativeEvent.translationX,
translateY: event.nativeEvent.translationY,
}, 0);
}
render() {
return (
<ImageBackground source={backImg} style={{ flex: 1 }} >
<PanGestureHandler
key={`test`}
onGestureEvent={(e) => { this.onTestMove(e) }}
onHandlerStateChange={e => { }}
>
<Animatable.View style={styles._animatable_view}
ref={((ref) => { this.testAnimRef = ref }).bind(this)}
useNativeDriver={true}
>
<Image source={testImg} style={styles._image} />
</Animatable.View>
</PanGestureHandler>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
_image: {
width: 50,
height: 25,
resizeMode: 'contain',
backgroundColor: 'black',
borderColor: 'gainsboro',
borderWidth: 2,
},
_animatable_view: {
position: "absolute",
top: 200,
left: 100,
},
});

I had the same problem trying to move around some cards in a view, and upon further dragging, they would reset to their origin.
My theory is/was that while the translated view would have its x / y coordinates translated, this would not apply to the parent of that view, and so the animated event passed from that component would initially have the original coordinates (nuke me if I'm wrong here)
So my solution was to keep an initial offset value in state, and maintain this every time the user releases the dragged motion
_onHandleGesture: any
constructor(props: OwnProps) {
super(props)
this.state = {
animationValue: new Animated.ValueXY({ x: 0, y: 0 }),
initialOffset: { x: 0, y: 0 },
}
this._onHandleGesture = (e: PanGestureHandlerGestureEvent) => {
this.state.animationValue.setValue({
x: e.nativeEvent.translationX + this.state.initialOffset.x, <- add initial offset to coordinates passed
y: e.nativeEvent.translationY + this.state.initialOffset.y,
})
}
}
_acceptCard = (cardValue: number) => {
const { targetLocation, onAccept } = this.props
const { x, y } = targetLocation
onAccept(cardValue)
Animated.spring(this.state.animationValue, {
// Some animation here
}).start(() => {
this.setState({ initialOffset: targetLocation }) // <- callback to set state value for next animation start
})
}
and the render method
<PanGestureHandler
onHandlerStateChange={this.onPanHandlerStateChange}
onGestureEvent={this._onHandleGesture}
failOffsetX={[-xThreshold, xThreshold]}
>
<Animated.View
style={{
position: "absolute",
left: 0,
top: 0,
transform: [{ translateX: this.state.animationValue.x }, { translateY: this.state.animationValue.y }],
}}
>
<CardTile size={size} content={content} layout={layout} backgroundImage={backgroundImage} shadow={shadow} />
</Animated.View>
</PanGestureHandler>
This example is based on the react-native-gesture-handler library, but the concept should apply to other solutions.
Dont know if this way is advisable, though it is functional.
Hope this helps!

Invalid prop 'paddingLeft' when doing an Animation

I am trying to use a React Native Animation to remove a padding(by making it 0) and then to put it back.
The following code is managing the animations:
componentWillMount() {
this.animatedValueLateralPadding = new Animated.Value(Constants.LIST_ITEM_MARGIN * this.props.dimensions.windowWidth);
}
componentWillReceiveProps(nextProps) {
if(nextProps.index == this.props.element.ordinalNumber) {
Animated.stagger(Constants.RESIZED_TIME, [
Animated.parallel([
Animated.timing(this.animatedValueLateralPadding, {
toValue: 0,
duration: Constants.RESIZE_TRANSITION_TIME
}),
]),
Animated.parallel([
Animated.timing(this.animatedValueLateralPadding, {
toValue: Constants.LIST_ITEM_MARGIN * nextProps.dimensions.windowWidth,
duration: Constants.RESIZE_TRANSITION_TIME
}),
])
]).start();
}
}
In my render method I specify the style like this:
const animatedStyle = {paddingLeft: this.animatedValueLateralPadding, paddingRight: this.animatedValueLateralPadding};
And then animatedStyle is used in this component which is returned:
<ScrollView
contentContainerStyle={[listStyles.container, animatedStyle]}
>
//some other code
The rest of the style is this:
const listStyles = StyleSheet.create({
container: {
backgroundColor: Constants.COLOR_BLACK,
minHeight: '100%'
}
});
The problem is that the padding does not disappear and I am getting this warning:
Failed prop type:Invalid prop 'paddingLeft' supplied to 'ScrollView'. Bad object:
{
"backgroundColor": "#000000",
"minHeight": "100%",
"paddingLeft": 18,
"paddingRight": 18
}
I don't understand why it doesn't like how I specified paddingLeft.
I tried to pass a String instead of Int all to the Animated.Value object:
this.animatedValueLateralPadding = new Animated.Value(String.valueOf(Constants.LIST_ITEM_MARGIN * this.props.dimensions.windowWidth));
and
toValue: String.valueOf(0),
and
toValue: String.valueOf(Constants.LIST_ITEM_MARGIN * nextProps.dimensions.windowWidth)
However, I am getting:
Error while updating property: 'paddingLeft' in shadow node of type: RCTView
null
Unknown value: function String() {
[native code]
}0
So why does it have a problem with the way in which I specify the padding? Any idea how this can be fixed?

You need to use Animated components like Animated.View, Animated.Text to have this animation.
Consider reading this: https://facebook.github.io/react-native/docs/animations.html
Just change your ScrollView to Animated.ScrollView

Seems you're trying to access 'ReactNative.createClass'

I run the following codes to create a component that renders a view but it generated some error. The codes are as follows:
var React = require('react-native');
var Dictionary = React.createClass({
render: function() {
var layout =
<React.View style = { styles.parent } >
<React.Text>
Type something in English:
</React.Text>
<React.TextInput />
<React.Text style = { styles.germanLabel } >
It's German equivalent is:
</React.Text>
<React.Text style = { styles.germanWord } >
</React.Text>
</React.View>
;
return layout;
},
});
var styles = React.StyleSheet.create({
// For the container View
parent: {
padding: 16
},
// For the Text Label
germanLabel: {
marginTop: 20,
fontWeight: 'bold'
},
// For the Text meaning
germanWord: {
marginTop: 15,
fontSize: 30,
fontStyle: 'italic'
}
});
React.AppRegistry.registerComponent('Dictionary', () => Dictionary);
and got the following error:
I even tried including import React, { Component } from 'react'; but it doesn't work. Could it be because of outdated version or something? I am not very good in react-native.

Change color of react-big-calendar events

I need to make a calendar with events and I decided to use react-big-calendar. But I need to make events of different colors. So each event will have some category and each category has corresponding color. How can I change the color of the event with react?
Result should look something like this

Sorry, I haven't read the documentation really well. It can be done with the help of eventPropGetter attribute. I've made it like this:
eventStyleGetter: function(event, start, end, isSelected) {
console.log(event);
var backgroundColor = '#' + event.hexColor;
var style = {
backgroundColor: backgroundColor,
borderRadius: '0px',
opacity: 0.8,
color: 'black',
border: '0px',
display: 'block'
};
return {
style: style
};
},
render: function () {
return (
<Layout active="plan" title="Planning">
<div className="content-app fixed-header">
<div className="app-body">
<div className="box">
<BigCalendar
events={this.events}
defaultDate={new Date()}
defaultView='week'
views={[]}
onSelectSlot={(this.slotSelected)}
onSelectEvent={(this.eventSelected)}
eventPropGetter={(this.eventStyleGetter)}
/>
</div>
</div>
</div>
</Layout>
);
}

Additional tip on how to style different kinds of events: In the myEvents array of event objects, I gave each object a boolean property isMine, then I defined:
<BigCalendar
// other props here
eventPropGetter={
(event, start, end, isSelected) => {
let newStyle = {
backgroundColor: "lightgrey",
color: 'black',
borderRadius: "0px",
border: "none"
};
if (event.isMine){
newStyle.backgroundColor = "lightgreen"
}
return {
className: "",
style: newStyle
};
}
}
/>

This solution is simple !
eventPropGetter={(event) => {
const backgroundColor = event.allday ? 'yellow' : 'blue';
return { style: { backgroundColor } }
}}
change the condition according to your need and it is done.

Siva Surya's solution is the fastest, and I have added the color property as well. Thanks...
import React, {useEffect, useLayoutEffect} from 'react';
import { Calendar, momentLocalizer,globalizeLocalizer } from 'react-big-calendar'
import moment from 'moment';
import { connect } from 'frontity';
import BackgroundWrapper from 'react-big-calendar/lib/BackgroundWrapper';
const MyCalendar = ({ actions, state, objetoBloque, formato }) => {
const localizer = momentLocalizer(moment);
const myEventsList = [
{
title: 'My Event',
start: '2022-06-21T13:45:00-05:00',
end: '2022-06-25T14:00:00-05:00',
// elcolor:'red'
colorEvento:'red'
},
{
title: 'Otro',
start: '2022-06-15T13:45:00-05:00',
end: '2022-06-23T14:00:00-05:00',
colorEvento:'green',
color:'white'
}
];
return(
<div>
<Calendar
// defaultDate = {defaultDate}
localizer={localizer}
events={myEventsList}
startAccessor="start"
endAccessor="end"
style={{ height: 500 }}
BackgroundWrapper = "red"
eventPropGetter={(myEventsList) => {
const backgroundColor = myEventsList.colorEvento ? myEventsList.colorEvento : 'blue';
const color = myEventsList.color ? myEventsList.color : 'blue';
return { style: { backgroundColor ,color} }
}}
/>
</div>
)
}
export default connect(MyCalendar);

Searching for how to change the border colour of an event also lead me here, and I couldn't find the answer anywhere else, but found that adding the following done the trick:
border: "black",
borderStyle: "solid"