Function components cannot have refs. Did you mean to use React.forwardRef()?

//Code that's giving Error
import React, {useRef} from 'react';
import {View, Text, Button} from 'react-native';
//Modalize
import {Modalize} from 'react-native-modalize';
// Design System
import styled from 'styled-components';
// Colors
import colorSchemes from '../design_system/colors';
import {useDarkModeContext} from 'react-native-dark-mode';
// Custom Components
import Tweet from '../components/Tweet';
import Search from '../components/Search';

function DiscoverScreen({navigation}) {
  const colorScheme = useDarkModeContext();
  const colors = colorSchemes[colorScheme] || colorSchemes.light;

  // Styled Component
  const Screen = styled.View`
    flex: 1;
    background-color: ${colors.background};
  `;

  //Modalize
  const modalizeRef = useRef < Modalize > null;

  const onOpen = () => {
    modalizeRef.current?.open();
  };

  return (
    <>
      <Screen>
        <Tweet onPress={onOpen} />
      </Screen>

      <Modalize
        scrollViewProps={{showsVerticalScrollIndicator: false}}
        snapPoint={300}
        ref={modalizeRef}>
        <View style={{height:500, backgroundColor: 'blue'}} />
      </Modalize>
    </>
  );
}

export default DiscoverScreen;

Tweet is a custom Component which has TouchableWithoutFeedback for accepting onPress

[jeremybarbet]

It works here: https://snack.expo.io/@jeremdsgn/modalize-error

const modalizeRef = useRef<Modalize>(null);

const onOpen = () => {
  modalizeRef.current?.open();
};

This syntax is using TypeScript. If you are running under JavaScript, like it is the case under the snack repro you provided, you need to remove the typescript syntax otherwise it won’t understand it.

const modalizeRef = useRef(null);

const onOpen = () => {
  if (modalizeRef.current) {
    modalizeRef.current.open();
  }
};

[jeremybarbet]

Thanks for the comment, glad it works!