The properties containerStyle, dense, titleStyle, scrollable settings of the Tab component are no effect

Start at the Tab component entry point and reproduce the supplied examples with containerStyle, dense, titleStyle, and scrollable. Trace how each prop reaches the rendered view, then verify that the reported styling, density, and scrolling behavior changes as expected.

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

I am verifying all the properties of the tab, but some properties are not effective

Expected behavior

I set CSS styles for these properties, but it didn't work

Describe the bug

The set values have no effect on the view. Here is my code

Steps To Reproduce

I set CSS styles for containerStyle but it didn't work

 <Tab
              value={Math.ceil(index1 > -1 ? index1 : 0)}
              onChange={e => setIndex1(e)}
              indicatorStyle={{
                backgroundColor: 'white',
                height: 3,
              }}
              scrollable
              variant="primary"
              containerStyle={active => ({
                backgroundColor: 'yellow',
                borderRadius: 20,
                width:100,
                borderWidth:2,
                borderColor:'black'
              })}
              dense={true}>
              <Tab.Item
                containerStyle={active => ({
                  width: 113,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Recent"
                titleStyle={{fontSize: 12}}
                icon={{name: 'calendar', type: 'font-awesome', color: 'white'}}
              />
              <Tab.Item
                title="Custom"
                containerStyle={active => ({
                  backgroundColor: active ? '#208990' : 'transparent',
                  width: 115,
                })}
                titleStyle={{fontSize: 12}}
                icon={{name: 'heart', type: 'font-awesome', color: 'white'}}
              />
              <Tab.Item
                containerStyle={active => ({
                  width: 118,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Cart"
                titleStyle={{fontSize: 12}}
                icon={{
                  name: 'shopping-cart',
                  type: 'font-awesome',
                  color: 'white',
                }}
              />
            </Tab>
Setting the values of true and false for dense has no effect
   <Tab
              value={Math.ceil(index2 > -1 ? index2 : 0)}
              onChange={e => setIndex2(e)}
              indicatorStyle={{
                backgroundColor: 'white',
                height: 3,
              }}
              dense={true}
              scrollable
              variant="primary"
              containerStyle={{backgroundColor: 'yellow', borderRadius: 20}}>
              <Tab.Item
                containerStyle={active => ({
                  width: 113,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                dense={true}
                title="Recent"
                titleStyle={{fontSize: 12}}
                icon={{name: 'calendar', type: 'font-awesome', color: 'white'}}
              />
              <Tab.Item
                title="Custom"
                containerStyle={active => ({
                  backgroundColor: active ? '#208990' : 'transparent',
                  width: 115,
                })}
                titleStyle={{fontSize: 12}}
                icon={{name: 'heart', type: 'font-awesome', color: 'white'}}
              />
              <Tab.Item
                containerStyle={active => ({
                  width: 118,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Cart"
                titleStyle={{fontSize: 12}}
                icon={{
                  name: 'shopping-cart',
                  type: 'font-awesome',
                  color: 'white',
                }}
              />
            </Tab>
Setting scrollable to false has no effect. Tab can still scroll
     <Tab
              value={Math.ceil(index8 > -1 ? index8 : 0)}
              onChange={e => setIndex8(e)}
              indicatorStyle={{
                backgroundColor: 'pink',
                height: 5,
                borderRadius: 2.5,
              }}
              scrollable={false}
              // variant="default"
              style={{
                backgroundColor:
                  index8 == 0 ? 'yellow' : index8 == 1 ? 'red' : 'blue',
              }}
              // dense={false}
              >
              <Tab.Item
                containerStyle={active => ({
                  width: 113,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Recent"
                titleStyle={{fontSize: 12}}
                icon={{name: 'calendar', type: 'font-awesome', color: 'black'}}
              />
              <Tab.Item
                title="Custom"
                containerStyle={active => ({
                  backgroundColor: active ? '#208990' : 'transparent',
                  width: 115,
                })}
                titleStyle={{fontSize: 12}}
                icon={{name: 'heart', type: 'font-awesome', color: 'black'}}
              />
              <Tab.Item
                containerStyle={active => ({
                  width: 118,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Cart"
                titleStyle={{fontSize: 12}}
                icon={{
                  name: 'shopping-cart',
                  type: 'font-awesome',
                  color: 'black',
                }}
              />
            </Tab>
Title Style setting font CSS has no effect on the view
      <Tab
              titleStyle={active => ({
                fontSize: 100,
                fontWeight: '400',
                color: '#222222',
              })}
              value={Math.ceil(index9 > -1 ? index9 : 0)}
              onChange={e => setIndex9(e)}
              indicatorStyle={{
                backgroundColor: 'pink',
                height: 5,
                borderRadius: 2.5,
              }}
              scrollable
              variant="default"
              style={{
                backgroundColor:
                  index9 == 0 ? 'yellow' : index9 == 1 ? 'red' : 'blue',
              }}
              dense={false}>
              <Tab.Item
                containerStyle={active => ({
                  width: 113,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Recent"
                titleStyle={{fontSize: 12}}
                icon={{name: 'calendar', type: 'font-awesome', color: 'black'}}
              />
              <Tab.Item
                title="Custom"
                containerStyle={active => ({
                  backgroundColor: active ? '#208990' : 'transparent',
                  width: 115,
                })}
                titleStyle={{fontSize: 12}}
                icon={{name: 'heart', type: 'font-awesome', color: 'black'}}
              />
              <Tab.Item
                containerStyle={active => ({
                  width: 118,
                  backgroundColor: active ? '#208990' : 'transparent',
                })}
                title="Cart"
                titleStyle={{fontSize: 12}}
                icon={{
                  name: 'shopping-cart',
                  type: 'font-awesome',
                  color: 'black',
                }}
              />
            </Tab>

Screenshots

No response

Your Environment

  ```
 "@rneui/base": "^4.0.0-rc.7",
"@rneui/themed": "^4.0.0-rc.8",
  ```