react-native FlatList scroll to bottom for chat app

I've made a chat app, and for rendering messages flatlist is used. But the problem is tried to scroll to the end of the screen every time the page is loaded, but it fails to do so. I've tried inverted props, but nothing happened, only the list got inverted.

Even played with ref to make it auto-scroll to the bottom, but nothing happened.

<FlatList
  ref="flatList"
  onContentSizeChange={() =>
    this.refs.flatList.scrollToEnd()}
  contentContainerStyle={{
    marginBottom:
      verticalScale(200)
  }}
  style={styles.list}
  data={this.state.messages}
/>

How to make it scroll to the bottom the screen or scroll to the last index of the message when rendered?

(UPDATE)

IT WAS AN ISSUE WITH THE <Content/> component i used which belongs to native-base . Upon removing and replacing it with a <View/> it works perfectly fine. Also, for chat based app the inverted prop in Flatlist is the way to implement in right way.

I've added the way i managed to scroll in the answer below. If you simply want your app to display the last item in the list and stays there, you can use inverted.

Here is how i solved it:

export default class Test extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    setTimeout(() => {
      this.FlatListRef.scrollToEnd();
    }, 1500);
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={[1, 2, 3, 4, 5, 6, 7, 8]}
          ref={(ref) => (this.FlatListRef = ref)}
          renderItem={({ item }) => {
            return (
              <View
                style={{
                  height: 140,
                  width: 400,
                  backgroundColor: "yellow",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <Text>{item}</Text>
              </View>
            );
          }}
        />
      </View>
    );
  }

}