ref prop is not working for Button component of New React native element lib (@rneui/base & @rneui/themed)

[shelendrasingh]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

ref prop is not working for Button component

`
import { withTheme } from '@rneui/themed';
import { Button as LibraryButton } from '@rneui/base';
..........

const Button = (props) => {
const { containerStyle, theme, ...rest } = props;
const buttonStyles = styles(containerStyle);
const fetchedStyle = buttonColors(props);
const { titleStyle, icon, ...buttonStyle } = fetchedStyle;
return <LibraryButton icon={icon} {...rest} {...buttonStyles} buttonStyle={buttonStyle} titleStyle={titleStyle} />;
};
....
export default withTheme(Button);
`
we are sending ref as prop in Button Component like below code.

Versions using :
"@rneui/base": "^4.0.0-rc.8",
"@rneui/themed": "^4.0.0-rc.8"

`
const submitButtonRef = React.useRef();
........

`

Expected behavior

Currently Getting: we are getting undefined for submitButtonRef?.current

Expected: we should get submitButtonRef?.current value.

Describe the bug

ref prop is not working for Button component

Steps To Reproduce

Click on 'Button'
not getting ref.current after pressing on the Button  we are getting undefined for ref.

Screenshots

No response

Your Environment

`npx @rneui/envinfo`

  ```
    Output from `npx @rneui/envinfo` goes here.
  ```

[arpitBhalla]

Hey, the example code you provided needs to be wrapped in forwardRef. Let me know if it helps.

const Button = forwardRef((props,ref) => {
	const { containerStyle, theme, ...rest } = props;
	const buttonStyles = styles(containerStyle);
	const fetchedStyle = buttonColors(props);
	const { titleStyle, icon, ...buttonStyle } = fetchedStyle;
	return <LibraryButton ref={ref} icon={icon} {...rest} {...buttonStyles} buttonStyle={buttonStyle} titleStyle={titleStyle} />;
});

export default withTheme(Button);

[shelendrasingh]

Hey, the example code you provided needs to be wrapped in forwardRef. Let me know if it helps.

const Button = forwardRef((props,ref) => {
	const { containerStyle, theme, ...rest } = props;
	const buttonStyles = styles(containerStyle);
	const fetchedStyle = buttonColors(props);
	const { titleStyle, icon, ...buttonStyle } = fetchedStyle;
	return <LibraryButton ref={ref} icon={icon} {...rest} {...buttonStyles} buttonStyle={buttonStyle} titleStyle={titleStyle} />;
});

export default withTheme(Button);

@arpitBhalla Thanks for reply but We have already tried this solution but it did not work. It is working fine if We are importing Button Component from 'react-native'. It is not working if We are importing Button component from '@rneui/base'.

Kindly help on it.