react_native_conditional_style_merging_with_classname_utility.ts

1import { className } from '@dwidge/class-name-rnw';
2import { StyleSheet, ViewStyle } from 'react-native';
3
4const styles = StyleSheet.create({
5  container: {
6    flex: 1,
7    backgroundColor: '#fff',
8  },
9  active: {
10    borderColor: 'blue',
11    borderWidth: 1,
12  },
13});
14
15interface Props {
16  isActive?: boolean;
17  style?: ViewStyle;
18}
19
20export const MyComponent = ({ isActive, style }: Props) => {
21  const combinedStyle = className(
22    styles.container,
23    isActive && styles.active,
24    style
25  );
26
27  // combinedStyle is a flattened object or array compatible with React Native's style prop
28  return null; 
29};