I want to change the fill colour on a single element in a lottie.json file conditionally. How can I access the fill of 'circle' and update the colour?
I currently have this
<LottieView
source={require('../assets/splash_logo_2.json')}
autoPlay
loop={false}
onAnimationFinish={() => {
progress.value = 1;
}}
colorFilters={[
{
keypath: 'circle',
color: progress.value === 1 ? '#85AA82' : '#B5FFAF',
},
]}
/>
Check this answer:
How do I use ColorFilter with React-Native-Lottie?
and also this tool to help you to identify it better:
https://colorize-react-native-lottie.netlify.app/
Related
I have a list of cards. I am selecting a sublist from the cards and transforming their x and y location to another point in the screen. I am trying to update their zIndex using a shared variable that updates based upon the order I select them. However, this works fine on Android but not on iOS. (Please look at the image for visual clarification).
Visual representation of ideal scenario
This is a simplified code of what I have.
This is the render component.
<View>
<TapGestureHandler onGestureEvent={tapGestureEvent}>
<Animated.View style={[cardStyle]}>
<Animated.View style={[frontImageStyle]}>
<Image
source={require('../../../assets/frontImage.png')}
style={styles.card}
/>
</Animated.View>
<Animated.View style={[backImageStyle]}>
<Image
source={require('../../../assets/backImage.png')}
style={styles.card}
/>
</Animated.View>
</Animated.View>
</TapGestureHandler>
</View>
This is my gestureTapHander where I am updating the x and y locations and also updating the index for each card based upon the total cards drawn so far, this total cards drawn is a shared variable and defined in my parent component.
const tapGestureEvent = useAnimatedGestureHandler({
onStart: (event, context) => {
context.y = yPosition.value; // It seems I am not even using this.
},
onActive: (event, context) => {},
onEnd: (event, context) => {
newYPosition.value = someValue
cardDrawnIndex.value = cardsDrawn.value;
cardsDrawn.value += 1;
},
});
This is the style that I have on the outerComponent.
cardDrawnIndex = useSharedVariable(-1);
const cardStyle = useAnimatedStyle(() => {
return {
transform: [
{translateX: someXValue},
{translateY: someYValue},
{rotateZ: `${someVariable.value}deg`},
{rotateY: `${someVariable.value}deg`},
{translateX: wasToChangeAnchorPointForMyZRotation}, // I don't understand why there is a need to do it and why isn't it as simple as saying, rotate with this anchor point.
{translateY: wasToChangeAnchorPointForMyZRotation},
],
zIndex: cardDrawnIndex.value,
// elevation: drawnCardZPosition.value, // Also tried this, it works only for Android, not for iOS.
};
});
I see there is a transformZ utility in react-native-redash but I am unable to figure out how to use it correctly for my use case. Or alternatively, if I can fix this zIndex issue on iOS, (maybe it has to do something with creating new instances of my card.)
I'm using react-native-modalize with flatListProps but I can't scroll the flatList, I tried panGestureEnabled={false}, or remove the height style but none of them fix it, here is my code:
<Modalize
ref={ref}
children={children}
adjustToContentHeight={true}
onOverlayPress={closeModal}
onClosed={onCloseCallback}
HeaderComponent={renderHeader}
flatListProps={
listData?.length > 0
? {
data: listData,
renderItem: renderListItem,
ItemSeparatorComponent: renderSeparator,
keyExtractor: listKeyExtractor,
contentContainerStyle: dStyles.dataList,
}
: undefined
}
modalStyle={styles.borderRadius}
/>
const dStyles = StyleSheet.create({
dataList: {
height: 400,
},
});
I check the listData and the array has 63 items but the flatList only render the first 9 items.
Fixed by adding to flatListProps these props:
initialNumToRender: 10
maxToRenderPerBatch:10
And add to <Modalize prop disableScrollIfPossible={false}
I'm not sure why but the height is also need to be removed. So this is new code:
<Modalize
ref={ref}
children={children}
adjustToContentHeight={true}
disableScrollIfPossible={false}
onOverlayPress={closeModal}
onClosed={onCloseCallback}
HeaderComponent={renderHeader}
flatListProps={
listData?.length > 0
? {
data: listData,
renderItem: renderListItem,
ItemSeparatorComponent: renderSeparator,
keyExtractor: listKeyExtractor,
initialNumToRender: 10,
maxToRenderPerBatch: 10,
}
: undefined
}
modalStyle={styles.borderRadius}
/>
As I mentioned, I cannot limit the FlatList height, so if the list is long enough, <Modalize will be expanded full screen, that is the limitation of this solution.
Is it possible to order inputs horizontally within ArrayImput and SimpleFormIterator? I know that the default is vertical. Thanks
See image of vertical inputs inside ArrayInputs here. Can the inputs be arranged horizontally? Thanks
Yes you can, the ArrayInput is made using material-ui which comes with its style way. For instance, you can play with elements root, form etc...
const useIteratorStyle = makeStyles(() => ({
root: {
display: 'flex',
flexDirection: 'row',
},
form: {
width: '100%',
},
line: {
border: 0,
},
}));
const iteratorClasses = useIteratorStyle();
<ArrayInput {...props}>
<SimpleFormIterator classes={iteratorWithIndexClasses}>
...
</SimpleFormIterator>
</ArrayInput>
Gives me something like
You can override each property of the useStyles object defined in the SimpleFormIterator: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
Inline prop has been introduced in version 4.3. It should work like that
<ArrayInput {...props}>
<SimpleFormIterator inline>
...
</SimpleFormIterator>
</ArrayInput>
Some iOS devices seems to be showing a , (comma) instead of a . on the decimal-pad. I believe this is to do with the keyboard language / locale. Is there a way I can force the decimal-pad to show a . regardless of keyboard language / locale?
<TextInput
rejectResponderTermination={false}
style={[
{
fontSize: entryValueFontSize,
height: height,
},
calculatorStyles.inputsShared,
calculatorStyles.amountInput,
theme.inputsShared,
]}
autoCapitalize={'none'}
placeholder={entryValueLabel}
placeholderTextColor={theme.placeholderTextColor}
keyboardType={'decimal-pad'}
returnKeyType={'done'}
defaultValue={''}
value={isNaN(this.state.entryValue) ? '' : this.state.entryValue}
onChangeText={(entryValue) => {
this.onEntryValueChange(entryValue);
}}
/>
Problem:
Desired output:
It is not possible to force keyboard to use comma. It is based on Region for example Czechia has comma. The solution I have created is to replace comma for decimal with point once comma is entered
<TextInput
onChangeText={(entryValue) => {
// I am passing keyboardType as prop
if (keyboardType === 'decimal-pad') {
this.onEntryValueChange(entryValue.replace(',', '.'));
} else {
this.onEntryValueChange(entryValue);
}
}}
/>
The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:
export const buttonTheme = {
colors: {
primary: COL_BASE_YELLOW,
disabled: COL_DARK_HIGHLIGHT,
},
}
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={() => handleSubmitPhoneNumber(phoneNumber)}
theme={buttonTheme}
disabled={phoneNumber.length < 5 ? true : false}>
Continue
</Button>
The primary color works however.
How do I change the color of the button when it is disabled?
Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
Continue
</Button>
From this Github issue:
The text if the contained button depends on the background color of
the button, which is automatically determined based on of the
background color is light it dark. Wherever theme is dark or not
doesn't affect it.
This is the desired behavior. We don't want to show white text on a
light background because you have a dark theme, otherwise the text
won't have enough contrast and will be illegible.
Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.
However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.
<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>
or,
[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>
I'm may be late but here's my solution:
<Button
id="save-phonenumber"
color="darkColor">
onClick={doSomething}
disabled={phoneNumber.length < 5 ? true : false}>
<Button/>
In you Css file you can add
Button#save-phonenumber[disabled] {
background: "fadedColor"
}
Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.
If you're caring about light and dark themes at the moment, then you can achieve your goal like this -
I would suggest creating your own Button Component on the top of Paper Button.
// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
{children}
</PaperButton>
// Using component...
<MyButton disabled={disabled}>
Click Me!
</MyButton>