How to restyle non style props such as contentContainerStyle in ScrollView?

[a-eid]

there is currently no way for nativewind to target contentContainerStyle style in a scrollview.

what is the recommended way to handle such styles ?

[marklawlor]

https://www.nativewind.dev/api/styled#styling-multiple-properties

[timedtext]

I am facing this problem too.

One further problem is that contentContainerStyle inside and outside the component are two different types.

import React from 'react';
import { ScrollView as RNScrollView, ScrollViewProps as RNScrollViewProps } from 'react-native';
import { styled } from 'nativewind';

export type ScrollViewProps = Omit<RNScrollViewProps, 'contentContainerStyle'> & {
// ViewStyle
  contentContainerStyle: any; // TODO fix any
};

const InnerScrollView = ({ contentContainerStyle, ...reset }: ScrollViewProps) => {
  return <RNScrollView contentContainerStyle={contentContainerStyle} {...reset} />;
};

export const ScrollView = styled(InnerScrollView, {
  props: {
    contentContainerStyle: true,
  },
});

// string
<ScrollView contentContainerStyle="flex-1" {...rest}>
      {children}
</ScrollView>

[marklawlor]

This should work on latest, no need for the wrapper component or custom props

import { ScrollView as RNScrollView } from 'react-native';

export const ScrollView = styled(RNScrollView, {
  props: {
    contentContainerStyle: true,
  },
});

// No type errors, contentContainerStyle is typed as 'ScrollViewProps["contentContainerStyle"] | string'
<ScrollView contentContainerStyle="flex-1" {...rest}>
      {children}
</ScrollView>

[enesozturk]

Did anyone try this approach on the Web? (@langtube, @marklawlor). I tried both ways but get errors when I try to set Tailwind classes to contentContainerStyle just like the example. I tried both the way in the documentation and the Mark's last recommendation.

Getting the following error on the web:

TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

[xinha-sh]

Did anyone try this approach on the Web? (@langtube, @marklawlor). I tried both ways but get errors when I try to set Tailwind classes to contentContainerStyle just like the example. I tried both the way in the documentation and the Mark's last recommendation.

Getting the following error on the web:

TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.

Properties like gap aren't being applied and on save the above issue exists

[avedetvedea]

@marklawlor This technique breaks some of my components' functionality. Here, I am unable to write more than a character at a time, in the email box

import { StatusBar } from 'expo-status-bar';
import { View, Text, ImageBackground, Dimensions } from 'react-native';
import { TextInput as RNPTextInput } from 'react-native-paper';
import { useState } from 'react';
// import { default as className } from 'twrnc';
import { styled } from 'nativewind';

export default function WelcomeScreen() {
  const [text, setText] = useState('');
  const userName = 'Ata';

  const { width: W, height: H } = Dimensions.get('window');

  const TextInput = styled(RNPTextInput, {
    props: {
      style: true,
    },
  });

  return (
    <View className="flex-1 flex-col bg-gray-600">
      <ImageBackground
        source={{ uri: 'https://picsum.photos/id/237/200/300' }}
        className="flex-1 h-full w-full"
      />
      <View className="flex-1 h-full">
        <Text className="text-3xl text-white">Welcome {userName}</Text>
        {/*<RNPTextInput*/}
        <TextInput
          className="w-full h-24 bg-pink-300"
          label="Email"
          value={text}
          onChangeText={(text) => setText(text)}
          onSubmitEditing={() => console.log('submitted')}
        />
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

[marklawlor]

Move const TextInput = styled(RNPTextInput) out of your component. Your creating a new styled component every render

[avedetvedea]

@marklawlor Hey again. This functionality breaks one of my component's type. The type becomes unknown. Is this expected?

const NestableDraggableFlatList = styled(NestableDraggableFlatListOriginal, {
  props: {
    contentContainerStyle: true,
  },
});

from

import DraggableFlatList, {
  NestableDraggableFlatList as NestableDraggableFlatListOriginal,
} from 'react-native-draggable-flatlist';

The data has type Item[]. After styled augmentation the following

<NestableDraggableFlatList
                  className="flex-1 w-full"
                  contentContainerStyle="items-end"
                  data={data}
                  keyExtractor={(item) => item.key}
                  renderItem={({ item, drag, index, isActive }) =>
                    renderItem({ item, drag, index, isActive })
                  }
                  onDragEnd={({ data }) => setData(data)}
                />

says that item and data are of type unknown and unknown[].

[akatyrenchuk]

I decided to use https://github.com/jaredh159/tailwind-react-native-classnames, to keep code consistency

contentContainerStyle={twmt-5 items-start gap-2.5 pb-2.5 px-5}

[lakardion]

Hello how do we do this now that styled is gone from v4?

[phanuelmutuma]

@lakardion you can use contentContainerClassName in place of contentContainerStyle as in mentioned in the v4 documentation. https://www.nativewind.dev/v4/overview.

remapProps(FlatList, {
  className: "style",
  ListFooterComponentClassName: "ListFooterComponentStyle",
  ListHeaderComponentClassName: "ListHeaderComponentStyle",
  columnWrapperClassName: "columnWrapperStyle",
  contentContainerClassName: "contentContainerStyle",
  indicatorClassName: "indicatorStyle",
});

[danharten-sovtech]

I'm also struggling a bit with this remapProps @phanuelmutuma

I'm trying to style expo-router Tabs component. Specifically like so, the difficulty comes as the style prop is nested.

remapProps(Tabs, {
  screenOptions: {
    tabBarActiveTintColorClassName: "tabBarActiveTintColor",
  }
});

    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '', // I'm trying to apply a style here
        headerShown: false,
      }}
    >

Do you by chance have any suggestions?